SVGAnimationElement: repeatEvent Ereignis

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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 ein Integer verbunden, der angibt, welche Wiederholungsiteration beginnt; dies kann in der detail Eigenschaft des Ereignisobjekts gefunden werden. Der Wert ist ein integer, der bei 0 beginnt, aber das Wiederholungsereignis wird nicht für die erste Iteration ausgelöst, daher werden die beobachteten Werte >= 1 sein. Dies wird in Firefox unterstützt, aber nicht in Chrome.

Dieses Ereignis kann nicht abgebrochen werden und wird nicht weitergegeben.

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.

Eigenschaften des Ereignisses

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

Equivalent der Ereignishandler-Eigenschaft

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

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

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # RepeatEvent