SVGAnimationElement: repeatEvent-Ereignis

Das repeatEvent-Ereignis der SVGAnimationElement-Schnittstelle wird ausgelöst, wenn die lokale Zeitleiste des Elements wiederholt wird. Es wird jedes Mal ausgelöst, wenn das Element wiederholt wird, nach der ersten Iteration.

Hinweis: Mit dem repeatEvent-Ereignis ist eine ganze Zahl verknüpft, die angibt, welche Wiederholungsiteration beginnt; diese kann in der detail-Eigenschaft des Ereignisobjekts gefunden werden. Der Wert ist eine 0-basierte Ganzzahl, aber das Wiederholungsereignis wird nicht für die erste Iteration ausgelöst, sodass die beobachteten Werte >= 1 sind. Dies wird in Firefox unterstützt, aber nicht in Chrome.

Dieses Ereignis ist nicht abbruchbar und löst sich nicht in der Ereignisblase auf.

Syntax

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

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

onrepeat = (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 er die Wiederholungsnummer für die Animation an.
TimeEvent.view Schreibgeschützt: Ein WindowProxy, das das Fenster identifiziert, von 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);
});

Ereignishandler-Eigenschaft Äquivalent

Beachten Sie, dass Sie einen Ereignislistener für das repeat-Ereignis auch mit der onrepeat-Ereignishandler-Eigenschaft erstellen können:

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RepeatEvent

Browser-Kompatibilität

BCD tables only load in the browser