SVGSVGElement.setCurrentTime() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.setCurrentTime(seconds)

Beschreibung

Die Methode setCurrentTime() des SVGSVGElement-Interfaces passt die Zeitachse (Uhr) eines SVG-Dokumentfragments an. Alle deklarativen SMIL-Animationen innerhalb dieses äußersten <svg>-Elements, also <animate>, <animateTransform>, <animateMotion> und <set>, springen danach zu dem Zustand, den sie zum angegebenen Zeitpunkt hätten.

Die Zeit wird in Sekunden relativ zum Start des Dokuments angegeben (Zeitpunkt 0 = Beginn der Dokument-Zeitachse). Damit lassen sich Animationen gezielt ansteuern, etwa für eine Scrubbing-Leiste, für Screenshots eines bestimmten Animationsstands oder für reproduzierbare Tests.

Die Methode wird häufig zusammen mit pauseAnimations(), unpauseAnimations() und getCurrentTime() genutzt. Ist die Zeitachse pausiert, bleibt die Animation nach dem Sprung auf dem gesetzten Stand stehen. Läuft sie, geht es ab der neuen Zeit weiter.

Parameter

Name	Typ	Default	Beschreibung
$seconds Pflicht	number		Neue aktuelle Zeit in Sekunden (Gleitkommazahl) relativ zum Start der Dokument-Zeitachse. Negative Werte werden in der Regel als `0` behandelt.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Animation an eine bestimmte Stelle springen lassen

// <svg id="stage"><circle r="10" cy="50"><animate attributeName="cx" from="0" to="200" dur="4s" repeatCount="indefinite"/></circle></svg>
const svg = document.getElementById('stage');

svg.pauseAnimations();   // Zeitachse anhalten
svg.setCurrentTime(2);   // zur Hälfte springen
console.log(svg.getCurrentTime());

2

Scrubbing mit einem Schieberegler

// <input type="range" id="scrub" min="0" max="4" step="0.01" value="0">
const svg = document.querySelector('svg');
const slider = document.getElementById('scrub');

svg.pauseAnimations();

slider.addEventListener('input', () => {
  svg.setCurrentTime(Number(slider.value));
});

Animation neu starten

const svg = document.querySelector('svg');

const restart = () => {
  svg.setCurrentTime(0);
  svg.unpauseAnimations();
};

document.getElementById('restart').addEventListener('click', restart);

// Wichtig · Fallstricke

Die Methode wirkt nur auf SMIL-Animationen. CSS-Animationen, CSS-Transitions und die Web Animations API (element.animate()) sind davon nicht betroffen. Für diese nutzt man Animation.currentTime.
Rufe die Methode am äußersten <svg>-Element auf. Verschachtelte <svg>-Elemente teilen sich die Zeitachse des äußeren Fragments.
Wird sie sehr früh aufgerufen, also vor dem load-Ereignis des SVG, merken sich manche Browser den Wert erst und wenden ihn beim Start der Zeitachse an. Für ein verlässliches Ergebnis nach dem Laden aufrufen.
Die Zeit wird in Sekunden angegeben, nicht in Millisekunden, anders als bei vielen anderen Web-APIs.
Ein Sprung zurück in der Zeit kann Ereignisse wie beginEvent oder endEvent erneut auslösen. Das hängt vom Browser ab.
Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge).

Siehe auch

SVGSVGElement.getCurrentTime() SVGSVGElement.pauseAnimations() SVGSVGElement.unpauseAnimations() SVGSVGElement.animationsPaused() SVGSVGElement SVGAnimationElement SVGSVGElement.getElementById()