SVGAnimationElement: beginEvent Ereignis
Das beginEvent
Ereignis der SVGAnimationElement
Schnittstelle wird ausgelöst, wenn die lokale Zeitleiste des Elements zu spielen beginnt. 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 Verlauf eines normalen (d. h. geplanten oder interaktiven) Zeitleisten-Spiels als auch im Fall, dass das Element mit einer DOM-Methode gestartet wurde, ausgelöst werden.
Dieses Ereignis ist nicht abbruchfähig und wird nicht an übergeordnete Elemente weitergeleitet.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("beginEvent", (event) => {});
onbegin = (event) => {};
Ereignistyp
Ereigniseigenschaften
TimeEvent.detail
Nur lesbar-
Ein
long
, das einige Detailinformationen über das Ereignis je nach Ereignistyp angibt. Für diesen Ereignistyp gibt es die Wiederholungsnummer für die Animation an. TimeEvent.view
Nur lesbar-
Ein WindowProxy, das das Fenster identifiziert, von dem das Ereignis generiert wurde.
Beispiele
Animierter Kreis
<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>
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 Ereignislistener für das begin
Ereignis mit der onbegin
Ereignis-Handler-Eigenschaft erstellen können:
animateElem.onbegin = () => {
console.log("beginEvent fired");
};
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # BeginEvent |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- SVG-Animation mit SMIL
endEvent
EreignisrepeatEvent
Ereignis