SVGAnimationElement.endElementAt() — Methode · JavaScript-Referenz

Signatur

SVGAnimationElement.prototype.endElementAt(offset)

Beschreibung

endElementAt() gehört zum Interface SVGAnimationElement und steht damit auf allen SMIL-Animationselementen in SVG zur Verfügung: <animate>, <animateTransform>, <animateMotion> und <set>. Die Methode fügt eine neue End-Instanzzeit hinzu, die sich aus der aktuellen Zeit der SVG-Zeitleiste plus dem angegebenen Versatz in Sekunden ergibt.

Damit steuern Sie das Ende einer Animation per Skript, zum Beispiel nach einem Klick, nach einem Timer oder abhängig von Nutzereingaben. Mit endElementAt(0) endet die Animation sofort, was endElement() entspricht. Bei einem positiven Wert endet sie verzögert, etwa damit eine laufende Bewegung noch kurz weiterläuft.

Wenn die Animation endet, greift der Wert des fill-Attributs: Mit fill="freeze" bleibt der zuletzt erreichte Wert stehen, mit fill="remove" (Standard) springt das Attribut auf den Ausgangswert zurück. Zusätzlich wird das Ereignis endEvent ausgelöst.

Die Methode wird meist zusammen mit end="indefinite" verwendet. Dann hat die Animation kein festes Ende und endet nur durch Skript-Aufrufe. Das Gegenstück zum Starten ist beginElementAt().

Parameter

Name	Typ	Default	Beschreibung
$offset Pflicht	number		Versatz in Sekunden (Gleitkommazahl) relativ zur aktuellen Zeit der Zeitleiste. `0` beendet die Animation sofort, `1.5` beendet sie nach 1,5 Sekunden. Negative Werte legen den Endzeitpunkt in die Vergangenheit, sodass die Animation in der Regel sofort endet.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Animation per Klick nach 2 Sekunden beenden

const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '300');
svg.setAttribute('height', '100');

const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', '20');
circle.setAttribute('cy', '50');
circle.setAttribute('r', '15');
circle.setAttribute('fill', 'tomato');

const anim = document.createElementNS(svgNS, 'animate');
anim.setAttribute('attributeName', 'cx');
anim.setAttribute('from', '20');
anim.setAttribute('to', '280');
anim.setAttribute('dur', '3s');
anim.setAttribute('repeatCount', 'indefinite');
anim.setAttribute('end', 'indefinite'); // Ende nur per Skript
anim.setAttribute('fill', 'freeze');    // Position beim Ende halten

circle.append(anim);
svg.append(circle);
document.body.append(svg);

anim.addEventListener('endEvent', () => console.log('Animation beendet'));

svg.addEventListener('click', () => {
  anim.endElementAt(2); // endet 2 Sekunden nach dem Klick
});

Animation beendet (ca. 2 Sekunden nach dem Klick)

Starten und zeitgesteuert beenden mit beginElementAt()

// &lt;animate id="pulse" attributeName="r" values="10;20;10" dur="1s"
//          begin="indefinite" end="indefinite" repeatCount="indefinite" /&gt;
const pulse = document.getElementById('pulse');

const pulseFor = (seconds) => {
  pulse.beginElementAt(0);       // sofort starten
  pulse.endElementAt(seconds);   // nach X Sekunden stoppen
};

document.querySelector('#notify').addEventListener('click', () => pulseFor(3));

Sofort beenden: endElementAt(0) statt endElement()

const anims = document.querySelectorAll('svg animate, svg animateTransform');

// Alle laufenden Animationen stoppen, z. B. bei prefers-reduced-motion
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  anims.forEach((a) => a.endElementAt(0));
}

console.log(`${anims.length} Animation(en) gestoppt`);

3 Animation(en) gestoppt

// Wichtig · Fallstricke

Einheit: offset wird in Sekunden angegeben, nicht in Millisekunden wie bei setTimeout(). endElementAt(2000) bedeutet also rund 33 Minuten.
Das Attribut end ist wichtig: Laut SMIL-Spezifikation sind Skript-Aufrufe für ein Element gedacht, dessen end-Liste indefinite enthält. Ohne dieses Attribut kann sich die Methode je nach Browser unterschiedlich verhalten oder mit festen Endzeiten wechselwirken. Setzen Sie daher end="indefinite".
Nur aktive Animationen: Ist die Animation gerade nicht aktiv, etwa weil sie noch nicht begonnen hat oder schon beendet ist, hat der Aufruf keine sichtbare Wirkung.
Wert des fill-Attributs beachten: Ohne fill="freeze" springt das animierte Attribut beim Ende auf den Ausgangswert zurück.
Zeitleiste: Die Zeit bezieht sich auf die SVG-Dokumentzeit. Wurde sie mit svg.pauseAnimations() angehalten, verzögert sich auch das geplante Ende.
Kompatibilität: Wird von Chrome, Edge, Firefox und Safari unterstützt. Für neue, nicht SVG-spezifische Animationen sind die Web Animations API (Element.animate()) oder CSS-Animationen oft flexibler.

Siehe auch

SVGAnimationElement.endElement() SVGAnimationElement.beginElementAt() SVGAnimationElement.beginElement() SVGAnimationElement SVGSVGElement.pauseAnimations() Element.animate()