SVGAnimationElement: beginEvent — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("beginEvent", handler)

Beschreibung

Das Ereignis beginEvent gehört zur Schnittstelle SVGAnimationElement. Diese Schnittstelle ist die Grundlage aller SMIL-Animationselemente in SVG: <animate>, <animateMotion>, <animateTransform> und <set>. Das Ereignis tritt jedes Mal auf, wenn ein aktives Intervall der Animation startet. Das passiert beim ersten Start, bei jedem Neustart (z. B. durch ein weiteres begin-Signal oder durch beginElement()) und bei Animationen mit mehreren Startzeiten in der Liste des begin-Attributs.

Einen Handler registrieren Sie mit addEventListener("beginEvent", …) oder über die Eigenschaft onbegin. Im SVG-Markup geht das auch mit dem Attribut onbegin. Das übergebene Objekt ist ein TimeEvent. Es steigt nicht auf (bubbles: false) und lässt sich nicht abbrechen.

Typische Einsatzfälle: JavaScript-Logik mit dem Start einer deklarativen Animation abstimmen (Ton abspielen, Zustand in der Oberfläche setzen, Analyse-Ereignis senden) oder weitere Animationen und Abläufe verketten, die sich über SMIL-Syntax wie begin="anim1.begin" nicht abbilden lassen.

Innerhalb von SMIL heißt dasselbe Ereignis nur begin, z. B. begin="fadeIn.begin+0.5s". In JavaScript lautet der Ereignisname dagegen beginEvent.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Ereignisname, genau `"beginEvent"`.
$handler Pflicht	(event: TimeEvent) => void		Callback, das ein `TimeEvent` erhält. Wichtige Eigenschaften: `event.target` (das Animationselement), `event.detail` (in der Regel `0`) und `event.view`.
$options	boolean \| AddEventListenerOptions	false	Übliche Optionen von `addEventListener`, z. B. `{ once: true }` oder `{ signal }`.

Beispiele

Start einer Animation mit addEventListener erkennen

// HTML: <svg><circle r="20" cx="50" cy="50"><animate id="move" attributeName="cx" from="50" to="250" dur="2s" begin="click" /></circle></svg>
const anim = document.getElementById('move');

anim.addEventListener('beginEvent', (event) => {
  console.log('Animation gestartet:', event.target.id);
  console.log('Startzeit (s):', anim.getStartTime());
});

Animation gestartet: move Startzeit (s): 3.42

on-Property onbegin statt addEventListener

const anim = document.querySelector('animateTransform');

// Nur ein Handler pro Element möglich – eine neue Zuweisung überschreibt den alten
anim.onbegin = () => {
  document.body.classList.add('is-animating');
};

// Handler wieder entfernen
// anim.onbegin = null;

Handler nach dem ersten Start entfernen und Animation per Code starten

const anim = document.getElementById('pulse');
let starts = 0;

const onBegin = () => {
  starts += 1;
  console.log(`Start Nr. ${starts}`);
  if (starts === 3) {
    anim.removeEventListener('beginEvent', onBegin);
    console.log('Listener entfernt');
  }
};

anim.addEventListener('beginEvent', onBegin);

// Animation dreimal manuell auslösen (benötigt begin="indefinite" oder restart="always")
const runs = [0, 1500, 3000];
runs.forEach((ms) => setTimeout(() => anim.beginElement(), ms));

Start Nr. 1 Start Nr. 2 Start Nr. 3 Listener entfernt

Auf den Start mit einem Promise warten

const waitForBegin = (el) =>
  new Promise((resolve) => el.addEventListener('beginEvent', resolve, { once: true }));

const anim = document.getElementById('fade');

const run = async () => {
  const ev = await waitForBegin(anim);
  console.log('Los geht’s bei', ev.target.getCurrentTime().toFixed(2), 's');
};
run();

Los geht’s bei 0.00 s

// Wichtig · Fallstricke

Ereignisname: In JavaScript heißt es beginEvent, nicht begin. Mit addEventListener('begin', …) wird der Handler nie aufgerufen. Den Namen begin gibt es nur in der SMIL-Syntax des Attributs begin (z. B. anim.begin).
Kein Aufsteigen: Das Ereignis steigt nicht auf. Ein Listener am <svg>-Wurzelelement bekommt es nur in der Capture-Phase mit ({ capture: true }).
Mehrfaches Auslösen: Jeder Neustart des aktiven Intervalls löst das Ereignis erneut aus. Wiederholungen durch repeatCount tun das nicht, dafür gibt es repeatEvent. Ob ein Neustart überhaupt möglich ist, steuert das Attribut restart.
Startzeit in der Vergangenheit: Liegt die Startzeit schon beim Laden der Seite zurück (z. B. begin=\"0s\"), kann das Ereignis feuern, bevor Ihr Skript den Listener registriert. Registrieren Sie den Listener früh oder verwenden Sie begin=\"indefinite\" zusammen mit beginElement().
Kompatibilität: SMIL-Animationen und beginEvent werden in allen aktuellen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Der Internet Explorer und der alte Edge (EdgeHTML) unterstützen SMIL nicht. CSS-Animationen und die Web Animations API lösen dieses Ereignis nicht aus. Dort sind animationstart bzw. Animation.ready das Gegenstück.

Siehe auch

SVGAnimationElement SVGAnimationElement: endEvent SVGAnimationElement: repeatEvent SVGAnimationElement.beginElement() SVGAnimationElement.getStartTime() TimeEvent EventTarget.addEventListener()