SVGAnimationElement: repeatEvent-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 repeatEvent-Ereignis der SVGAnimationElement-Schnittstelle wird ausgelöst, wenn sich die lokale Zeitleiste des Elements wiederholt. Es wird nach der ersten Iteration bei jeder weiteren Wiederholung des Elements ausgelöst.

Hinweis: Dem repeatEvent-Ereignis ist eine Ganzzahl zugeordnet, die angibt, welche Wiederholungsiteration beginnt. Sie befindet sich in der detail-Eigenschaft des Ereignisobjekts. Der Wert ist eine nullbasierte Ganzzahl. Da das Ereignis für die erste Iteration nicht ausgelöst wird, sind die beobachteten Werte jedoch >= 1. Dies wird von Firefox unterstützt, nicht aber von Chrome.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergereicht.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

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

onrepeat = (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 Event-Handler-Eigenschaft

Sie können auch mit der Event-Handler-Eigenschaft onrepeat einen Event-Listener für das repeat-Ereignis erstellen. Beachten Sie jedoch, dass dadurch andere Event-Listener ersetzt werden, die gegebenenfalls über onrepeat hinzugefügt wurden:

animateElem.onrepeat = () => {
  console.log("repeatEvent fired");
};

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # OnRepeatEventAttribute

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