SVGAnimationElement: repeatEvent event

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, nach der ersten Iteration.

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

Dieses Ereignis ist nicht abbruchfähig und wird nicht gebubbelt.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-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 es die Wiederholungsnummer der 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);
});

Entsprechende Ereignis-Handler-Eigenschaft

Beachten Sie, dass Sie auch einen Ereignis-Listener für das repeat-Ereignis mithilfe der onrepeat Ereignis-Handler-Eigenschaft erstellen können:

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RepeatEvent