SVGAnimationElement: endEvent-Ereignis

Baseline 2026

Neu verfügbar

Seit Mai 2026 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 endEvent-Ereignis der Schnittstelle SVGAnimationElement wird ausgelöst, wenn das aktive Ende der Animation erreicht ist.

Hinweis: Dieses Ereignis wird nicht am Ende jeder einzelnen Animationswiederholung ausgelöst. Es kann sowohl während des normalen (d.h. geplanten oder interaktiven) Ablaufs der Zeitleiste ausgelöst werden als auch dann, wenn das Element mit einer DOM-Methode beendet wurde.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht nach oben weitergegeben.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

onend = (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 />

<button>Stop animation</button>

<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");
let btn = document.querySelector("button");

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

animateElem.addEventListener("endEvent", () => {
  let listItem = document.createElement("li");
  listItem.textContent = "endEvent 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);
});

btn.addEventListener("click", () => {
  btn.disabled = true;
  animateElem.setAttribute("repeatCount", "1");
});

Verwendung der Event-Handler-Eigenschaft

Sie können auch mit der Event-Handler-Eigenschaft onend einen Event-Listener für das Ereignis end erstellen. Beachten Sie jedoch, dass dadurch gegebenenfalls andere mit onend hinzugefügte Event-Listener ersetzt werden:

animateElem.onend = () => {
  console.log("endEvent fired");
};

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # OnEndEventAttribute

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