SVGSVGElement.getCurrentTime() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.getCurrentTime()

Beschreibung

Die Methode getCurrentTime() liefert die aktuelle Position auf der Animationszeitleiste eines <svg>-Elements in Sekunden. Diese Zeitleiste steuert alle deklarativen SMIL-Animationen innerhalb des Fragments, also <animate>, <animateTransform>, <animateMotion> und <set>.

Die Zeit fängt an zu laufen, sobald das Dokument geladen ist, genauer mit dem load-Ereignis des SVG-Dokuments. Vorher gibt die Methode 0 zurück. Ist die Zeitleiste mit pauseAnimations() angehalten, bleibt der Wert stehen, bis unpauseAnimations() aufgerufen wird. Mit setCurrentTime() springt die Zeitleiste auf einen beliebigen Zeitpunkt.

In der Praxis braucht man die Methode für eigene Steuerelemente von SVG-Animationen, etwa Fortschrittsanzeigen, Scrubber oder Play/Pause-Schalter, und um JavaScript-Logik mit laufenden SMIL-Animationen abzugleichen.

Rückgabewert

Typ

number

Beschreibung

Gleitkommazahl mit der aktuellen Zeit in Sekunden (nicht Millisekunden) seit dem Start der Zeitleiste des Dokumentfragments.

Beispiele

Aktuelle Animationszeit auslesen

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

setTimeout(() => {
  const t = svg.getCurrentTime();
  console.log(`Animationszeit: ${t.toFixed(2)} s`);
}, 1500);

Animationszeit: 1.50 s

Play/Pause mit Zeitanzeige

const svg = document.querySelector('#animation');
const button = document.querySelector('#toggle');
const anzeige = document.querySelector('#zeit');

button.addEventListener('click', () => {
  if (svg.animationsPaused()) {
    svg.unpauseAnimations();
    button.textContent = 'Pause';
  } else {
    svg.pauseAnimations();
    button.textContent = 'Abspielen';
  }
});

const aktualisieren = () => {
  anzeige.textContent = `${svg.getCurrentTime().toFixed(1)} s`;
  requestAnimationFrame(aktualisieren);
};
requestAnimationFrame(aktualisieren);

Relativ zur aktuellen Zeit vor- und zurückspulen

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

const spulen = (sekunden) => {
  const ziel = Math.max(0, svg.getCurrentTime() + sekunden);
  svg.setCurrentTime(ziel);
  console.log('Neue Zeit:', svg.getCurrentTime());
};

spulen(2);   // 2 Sekunden vor
spulen(-1);  // 1 Sekunde zurück

Neue Zeit: 2 Neue Zeit: 1

// Wichtig · Fallstricke

Einheit: Der Wert ist in Sekunden angegeben, nicht in Millisekunden wie bei performance.now() oder Date.now().
Nur SMIL: Die Methode gilt nur für die SMIL-Zeitleiste. CSS-Animationen und die Web Animations API (element.animate()) laufen unabhängig davon. Dort nutzt man stattdessen Animation.currentTime bzw. document.timeline.currentTime.
Vor dem Laden: Vor dem load-Ereignis liefert die Methode 0.
Verschachtelte SVGs: Nur das äußerste <svg>-Element eines Fragments hat eine eigene Zeitleiste. Innere <svg>-Elemente teilen sie.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Der Internet Explorer kennt SMIL nicht, dort ist die Methode wirkungslos.

Siehe auch

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