SVGAnimationElement: repeatEvent — Ereignis · JavaScript-Referenz

Signatur

animationElement.addEventListener("repeatEvent", handler)

Beschreibung

Das Ereignis repeatEvent gehört zur Schnittstelle SVGAnimationElement und damit zu SMIL-Animationen wie <animate>, <animateMotion>, <animateTransform> und <set>. Es wird ausgelöst, wenn eine Animation durch repeatCount oder repeatDur in einen weiteren Durchlauf eintritt. Für den ersten Durchlauf wird kein repeatEvent ausgelöst – dafür gibt es beginEvent.

Das übergebene Ereignisobjekt ist ein TimeEvent. Dessen Eigenschaft detail enthält die Nummer der gerade begonnenen Wiederholung (beim zweiten Durchlauf also 1), view verweist auf das zugehörige Window. Das Ereignis steigt nicht auf (bubbles: false) und kann nicht abgebrochen werden.

Registriert wird der Handler per addEventListener("repeatEvent", …) – beachte die ungewöhnliche Schreibweise mit Suffix Event. Alternativ gibt es das Markup-Attribut bzw. die Eigenschaft onrepeat. Typische Einsatzzwecke sind Durchlaufzähler, das Synchronisieren anderer UI-Elemente mit einer Endlosanimation oder das gezielte Stoppen nach einer bestimmten Anzahl Wiederholungen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"repeatEvent"` (nicht `"repeat"`).
$handler Pflicht	(event: TimeEvent) => void		Callback, der bei jeder neuen Wiederholung aufgerufen wird. `event.detail` enthält den Wiederholungsindex.
$options	boolean\|AddEventListenerOptions	false	Optionen wie `once`, `signal` oder `capture`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler erhält ein TimeEvent-Objekt.

Beispiele

Wiederholungen einer Animation mitzählen

const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
svg.setAttribute('width', '200');
svg.setAttribute('height', '100');
const circle = document.createElementNS(NS, 'circle');
circle.setAttribute('cx', '20');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '15');
const anim = document.createElementNS(NS, 'animate');
anim.setAttribute('attributeName', 'cx');
anim.setAttribute('from', '20');
anim.setAttribute('to', '180');
anim.setAttribute('dur', '1s');
anim.setAttribute('repeatCount', '4');
circle.append(anim);
svg.append(circle);
document.body.append(svg);

anim.addEventListener('beginEvent', () => console.log('Start'));
anim.addEventListener('repeatEvent', (event) => {
  console.log(`Wiederholung Nr. ${event.detail}`);
});
anim.addEventListener('endEvent', () => console.log('Fertig'));

Start Wiederholung Nr. 1 Wiederholung Nr. 2 Wiederholung Nr. 3 Fertig

Endlosanimation nach 3 Wiederholungen stoppen (removeEventListener)

// <animate id="pulse" attributeName="r" values="10;20;10" dur="0.5s" repeatCount="indefinite"/>
const pulse = document.querySelector('#pulse');

const onRepeat = (event) => {
  console.log('Runde', event.detail);
  if (event.detail >= 3) {
    pulse.endElement();            // Animation beenden
    pulse.removeEventListener('repeatEvent', onRepeat);
    console.log('Listener entfernt');
  }
};

pulse.addEventListener('repeatEvent', onRepeat);

Runde 1 Runde 2 Runde 3 Listener entfernt

Handler über die onrepeat-Eigenschaft bzw. das Attribut

// Im Markup: <animate id="blink" ... onrepeat="console.log('Markup-Handler')"/>
const blink = document.querySelector('#blink');
const status = document.querySelector('#status');

// Eigenschaft überschreibt einen evtl. vorhandenen Attribut-Handler
blink.onrepeat = (event) => {
  status.textContent = `Durchlauf ${event.detail + 1}`;
};

// Entfernen:
// blink.onrepeat = null;

// Wichtig · Fallstricke

Ereignisname: Mit addEventListener heißt das Ereignis "repeatEvent"; "repeat" funktioniert nicht. Nur Attribut/Eigenschaft heißen onrepeat.
Kein Ereignis für den ersten Durchlauf: Nutze dafür beginEvent. Ohne repeatCount/repeatDur wird repeatEvent nie ausgelöst.
Übersprungene Wiederholungen: Springst du mit svg.setCurrentTime() vor oder ist der Tab im Hintergrund gedrosselt, wird unter Umständen nicht für jede übersprungene Wiederholung ein Ereignis ausgelöst. Verlasse dich für Zähler lieber auf event.detail als auf das Hochzählen einer eigenen Variablen.
Kein Aufsteigen: Das Ereignis steigt nicht auf; eine Ereignisdelegation am <svg>-Element funktioniert nur in der Capture-Phase ({ capture: true }).
Kompatibilität: In Chrome, Edge und Firefox wird das Ereignis unterstützt. Safari/WebKit unterstützt SMIL-Zeitereignisse nur eingeschränkt – teste dort gezielt. Für neue Projekte sind CSS-Animationen (animationiteration) oder die Web Animations API oft die robustere Alternative.

Siehe auch

SVGAnimationElement SVGAnimationElement: beginEvent SVGAnimationElement: endEvent TimeEvent SVGAnimationElement.endElement() HTMLInputElement: select