SVGAnimationElement: beginEvent-Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das beginEvent-Ereignis der SVGAnimationElement-Schnittstelle wird ausgelöst, wenn der lokale Zeitstrahl des Elements beginnt, abzuspielen. Es wird jedes Mal ausgelöst, wenn das Element die aktive Dauer beginnt (d.h. wenn es neu startet, aber nicht bei Wiederholungen).

Es kann sowohl im Rahmen der normalen (d.h. geplanten oder interaktiven) Zeitstrahl-Abspielung als auch im Fall, dass das Element mit einer DOM-Methode gestartet wurde, ausgelöst werden.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergeleitet.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

addEventListener("beginEvent", (event) => { })

onbegin = (event) => { }

Ereignistyp

Ein TimeEvent. Erbt von Event.

Ereigniseigenschaften

TimeEvent.detail Schreibgeschützt: Ein long, das einige Detailinformationen über das Ereignis angibt, abhängig vom Typ des Ereignisses. Für diesen Ereignistyp gibt es die Wiederholungsnummer der Animation an.
TimeEvent.view Schreibgeschützt: Ein WindowProxy, das das Fenster identifiziert, aus dem das Ereignis generiert wurde.

Beispiele

Animierter Kreis

html

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
  <title>SVG SMIL Animate with Path</title>
  <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="5s" repeatCount="indefinite" />
  </circle>
</svg>

<hr />

<ul></ul>

css

ul {
  height: 100px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  padding: 10px 30px;
}

let svgElem = document.querySelector("svg");
let animateElem = document.querySelector("animateMotion");
let list = document.querySelector("ul");

animateElem.addEventListener("beginEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "beginEvent fired";
  list.appendChild(listItem);
});

animateElem.addEventListener("repeatEvent", (e) => {
  let listItem = document.createElement("li");
  let msg = "repeatEvent fired";
  if (e.detail) {
    msg += `; repeat number: ${e.detail}`;
  }
  listItem.textContent = msg;
  list.appendChild(listItem);
});

Äquivalent zur Ereignis-Handler-Eigenschaft

Beachten Sie, dass Sie auch einen Ereignis-Listener für das begin-Ereignis erstellen können, indem Sie die onbegin-Ereignis-Handler-Eigenschaft verwenden:

animateElem.onbegin = () => {
  console.log("beginEvent fired");
};

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # BeginEvent