Signatur
Beschreibung
beginElement() startet ein SVG-Animationselement wie <animate>, <animateTransform>, <animateMotion> oder <set> per Skript. Intern legt der Aufruf eine neue Startinstanzzeit an, und zwar für die aktuelle Zeit der SVG-Dokumentzeitleiste. Das wirkt so, als wäre in diesem Moment ein Startereignis eingetreten.
Am häufigsten nutzt man die Methode zusammen mit begin="indefinite". Dann startet die Animation nicht automatisch beim Laden, sondern erst, wenn Skriptcode sie auslöst, zum Beispiel nach einem Klick, einer Formulareingabe oder einem Scroll-Ereignis. So lassen sich deklarative SMIL-Animationen mit Anwendungslogik steuern, ohne sie in CSS- oder Web-Animations-Code umzuschreiben.
Läuft die Animation bereits, wird sie normalerweise neu gestartet. Das gilt aber nur, wenn das Attribut restart es erlaubt: always ist der Standard, whenNotActive startet nur eine gerade nicht aktive Animation neu, never verhindert jeden Neustart. Die Methode berücksichtigt außerdem die Zeitsteuerung des Dokuments: Ist die Zeitleiste mit SVGSVGElement.pauseAnimations() angehalten, beginnt die Animation erst, wenn die Zeitleiste weiterläuft.
Rückgabewert
undefined).Beispiele
Animation per Klick starten
// HTML:
// <svg width="200" height="100">
// <circle id="ball" cx="20" cy="50" r="15" fill="tomato">
// <animate id="move" attributeName="cx" from="20" to="180"
// dur="1s" begin="indefinite" fill="freeze" />
// </circle>
// </svg>
// <button id="start">Start</button>
const anim = document.getElementById('move');
document.getElementById('start').addEventListener('click', () => {
anim.beginElement();
console.log('Animation gestartet bei', anim.getStartTime().toFixed(2), 's');
});Neustart mit beginElement() und Ende über endEvent
const anim = document.querySelector('#pulse'); // <animate begin="indefinite" restart="always" ...>
anim.addEventListener('endEvent', () => {
console.log('Durchlauf beendet');
});
// Jeder Aufruf startet die Animation von vorn
document.querySelector('#retry').addEventListener('click', () => anim.beginElement());Mehrere Animationen gleichzeitig auslösen
// Alle Animationen mit der Klasse "intro" gemeinsam starten
const startIntro = () => {
document.querySelectorAll('svg .intro').forEach((el) => {
if (el instanceof SVGAnimationElement) el.beginElement();
});
};
window.addEventListener('load', startIntro);Starten mit Verzögerung: beginElementAt()
const anim = document.getElementById('move');
// Sofort starten
anim.beginElement();
// Alternativ: Start in 0,5 Sekunden
// anim.beginElementAt(0.5);// Wichtig · Fallstricke
- Mit
restart="never"ignoriert der Browser weitere Aufrufe, sobald die Animation einmal gelaufen ist. Mitrestart="whenNotActive"werden Aufrufe während eines laufenden Durchgangs ignoriert. - Angehaltene Zeitleiste: Nach
svg.pauseAnimations()startet die Animation erst nachsvg.unpauseAnimations()sichtbar. - Ohne
begin="indefinite"kommt zum automatischen Start eine zusätzliche Startinstanz hinzu. Das kann zu unerwarteten doppelten Durchläufen führen. - Laut SVG-Spezifikation gibt die Methode nichts zurück. Ältere Implementierungen konnten Ausnahmen werfen, moderne Browser tun das nicht.
- Kompatibilität: SMIL-Animationen funktionieren in allen aktuellen Browsern. Chrome hatte SMIL eine Zeit lang als veraltet markiert, diese Einstufung aber zurückgenommen. Der alte Internet Explorer und EdgeHTML (vor der Umstellung von Edge auf Chromium) unterstützen SMIL nicht. Für komplexe Abläufe kann die Web Animations API (
Element.animate()) die flexiblere Wahl sein. - Die Methode funktioniert nur mit SVG, das im DOM eingebunden ist (inline oder über
<object>). Bei SVG, das über<img>eingebunden ist, hat Skriptcode keinen Zugriff auf die Elemente.