SVGAnimationElement: beginEvent-Ereignis

Baseline 2025

Neu verfügbar

Seit Dezember 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das beginEvent-Ereignis der SVGAnimationElement-Schnittstelle wird ausgelöst, wenn die lokale Zeitleiste des Elements zu laufen beginnt. Es wird jedes Mal ausgelöst, wenn die aktive Dauer des Elements beginnt (also wenn es neu startet, nicht aber wenn es sich wiederholt).

Es kann sowohl während des normalen (also geplanten oder interaktiven) Ablaufs der Zeitleiste als auch dann ausgelöst werden, wenn das Element mit einer DOM-Methode gestartet wurde.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht durch die DOM-Hierarchie weitergereicht.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie die Ereignisbehandlungseigenschaft der Schnittstelle verwenden:

onbegin = (event) => { }

Ereignistyp

Ein TimeEvent. Erbt von Event.

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 #dddddd;
  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);
});

Verwendung der Ereignisbehandlungseigenschaft

Sie können auch mit der Ereignisbehandlungseigenschaft onbegin einen Event-Listener für das Ereignis begin erstellen. Beachten Sie jedoch, dass dadurch gegebenenfalls andere über onbegin hinzugefügte Event-Listener ersetzt werden:

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

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # OnBeginEventAttribute

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden