Signatur
SVGAnimationElement.prototype.getCurrentTime()
Beschreibung
getCurrentTime() ist eine Methode von SVGAnimationElement. Diese Schnittstelle ist die Basis von <animate>, <set>, <animateMotion> und <animateTransform>. Die Methode liefert die aktuelle Dokumentzeit in Sekunden. Gemeint ist die Zeit relativ zum Zeitpunkt null des Zeitcontainers, also in der Regel des äußersten <svg>-Elements.
Wichtig: Der Wert bezieht sich nicht auf den Start der einzelnen Animation. Er ist die gemeinsame Zeitachse aller Animationen im selben SVG-Fragment. Deshalb liefert er fast immer denselben Wert wie SVGSVGElement.getCurrentTime() des zugehörigen Wurzel-<svg>-Elements.
Typische Einsätze:
- Den Fortschritt einer Animation berechnen, zusammen mit
getStartTime()undgetSimpleDuration(). - Skriptlogik mit SMIL-Animationen synchronisieren.
- Animationen zeitlich genau über
beginElementAt()oderendElementAt()steuern.
Rückgabewert
Typ
number
Beschreibung
Die aktuelle Zeit des Zeitcontainers in Sekunden als Gleitkommazahl, z. B.
2.345. Solange das Dokument noch nicht geladen ist oder die Zeitachse steht, ist der Wert oft 0.Beispiele
Aktuelle Dokumentzeit auslesen
// <svg id="bild"><circle r="10" cx="20" cy="20"><animate id="anim" attributeName="cx" from="20" to="200" dur="4s" repeatCount="indefinite"/></circle></svg>
const anim = document.getElementById('anim');
setTimeout(() => {
console.log(`Zeit: ${anim.getCurrentTime().toFixed(2)} s`);
}, 1500);Zeit: 1.50 s (ungefähr)
Fortschritt einer Animation in Prozent berechnen
const anim = document.querySelector('animate');
const fortschritt = () => {
try {
const start = anim.getStartTime(); // wirft einen Fehler, wenn kein aktives Intervall existiert
const dauer = anim.getSimpleDuration(); // wirft einen Fehler bei unbestimmter Dauer
const vergangen = anim.getCurrentTime() - start;
return Math.min(100, ((vergangen % dauer) / dauer) * 100);
} catch {
return null; // Animation nicht aktiv
}
};
const tick = () => {
const p = fortschritt();
if (p !== null) console.log(`Fortschritt: ${p.toFixed(0)} %`);
requestAnimationFrame(tick);
};
requestAnimationFrame(tick);Fortschritt: 12 %
Fortschritt: 13 %
…
Animation 2 Sekunden nach der aktuellen Zeit starten
// <animate id="blink" attributeName="opacity" from="1" to="0" dur="1s" begin="indefinite"/>
const blink = document.getElementById('blink');
document.querySelector('button').addEventListener('click', () => {
const jetzt = blink.getCurrentTime();
blink.beginElementAt(2); // Versatz relativ zu jetzt
console.log(`Start geplant für t = ${(jetzt + 2).toFixed(2)} s`);
});Start geplant für t = 7.31 s
// Wichtig · Fallstricke
- Der Wert ist keine Zeit innerhalb der Animation: Die Methode liefert die Zeit des Zeitcontainers. Die lokale Zeit einer Animation berechnest du selbst mit
getCurrentTime() - getStartTime(). - Pausieren wirkt sich aus: Wenn
SVGSVGElement.pauseAnimations()aufgerufen wurde, bleibt der Wert stehen.setCurrentTime()am Wurzel-<svg>verschiebt ihn. - Nicht mit
performance.now()verwechseln: Die SVG-Zeitachse beginnt beim Laden des SVG-Dokuments und wird in Sekunden gemessen, nicht in Millisekunden. - Browser-Unterstützung: Chrome, Edge, Firefox und Safari unterstützen die Methode. Sie funktioniert nur mit deklarativen SMIL-Animationen. Für CSS-Animationen und die Web Animations API gibt es
Animation.currentTimebzw.document.timeline.currentTime(in Millisekunden). - Bei SVGs, die über
<img>oder als CSS-Hintergrund eingebunden sind, hat das Skript keinen Zugriff auf die Elemente.