Signatur
Beschreibung
Die Methode pauseAnimations() der Schnittstelle SVGSVGElement pausiert alle deklarativen SVG-Animationen, also <animate>, <animateTransform>, <animateMotion> und <set>, die in diesem <svg>-Element enthalten sind. Die Zeit dieses Dokumentfragments bleibt dabei stehen, und alle animierten Attribute behalten ihren aktuellen Wert.
Mit unpauseAnimations() laufen die Animationen genau an der Stelle weiter, an der sie angehalten wurden. Ob gerade pausiert ist, fragst du mit animationsPaused() ab. Die aktuelle Zeit in Sekunden liefert getCurrentTime(). Solange pausiert ist, kannst du mit setCurrentTime() gezielt zu einem Zeitpunkt springen, zum Beispiel für ein Standbild oder einen eigenen Zeitregler.
Typische Einsätze sind Start-/Stopp-Schalter für animierte Grafiken und das Anhalten von Animationen, wenn der Tab nicht sichtbar ist. Außerdem kannst du damit die Einstellung prefers-reduced-motion respektieren. Die Methode wirkt nur auf SMIL-Animationen. CSS-Animationen und Web-Animations-API-Animationen sind davon nicht betroffen.
Rückgabewert
undefined).Beispiele
Start-/Stopp-Schalter für eine SMIL-Animation
// HTML:
// <svg id="logo" width="120" height="120">
// <circle cx="60" cy="60" r="20" fill="tomato">
// <animate attributeName="r" values="20;50;20" dur="2s" repeatCount="indefinite" />
// </circle>
// </svg>
// <button id="toggle">Pause</button>
const svg = document.getElementById('logo');
const button = document.getElementById('toggle');
button.addEventListener('click', () => {
if (svg.animationsPaused()) {
svg.unpauseAnimations();
button.textContent = 'Pause';
} else {
svg.pauseAnimations();
button.textContent = 'Weiter';
}
console.log('Pausiert:', svg.animationsPaused(), 'Zeit:', svg.getCurrentTime().toFixed(2));
});prefers-reduced-motion respektieren
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const applyMotionPreference = () => {
document.querySelectorAll('svg').forEach((svg) => {
if (reduceMotion.matches) {
svg.pauseAnimations();
svg.setCurrentTime(0); // auf den Anfangszustand zurücksetzen
} else {
svg.unpauseAnimations();
}
});
};
applyMotionPreference();
reduceMotion.addEventListener('change', applyMotionPreference);Animationen in Hintergrund-Tabs anhalten
const svg = document.querySelector('svg#dashboard-chart');
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
svg.pauseAnimations();
} else {
svg.unpauseAnimations();
}
console.log(document.hidden ? 'angehalten' : 'fortgesetzt');
});// Wichtig · Fallstricke
- Nur SMIL: CSS-
@keyframes-Animationen und Animationen der Web Animations API (element.animate()) laufen weiter. Diese hältst du z. B. überanimation-play-state: pausedoderAnimation.prototype.pause()an. - Geltungsbereich: Die Methode wirkt auf das Dokumentfragment des äußersten
<svg>-Elements. Rufst du sie auf einem verschachtelten<svg>auf, betrifft das in der Regel das ganze Fragment, nicht nur den inneren Teilbaum. - Externe SVGs: SVGs, die per
<img>oder CSS-background-imageeingebunden sind, erreichst du per Skript nicht. Nur Inline-SVG oder<object>/<iframe>(übercontentDocument, gleiche Herkunft) funktionieren. - Mehrfache Aufrufe sind unkritisch. Ein Aufruf bei bereits pausierten Animationen hat keine Wirkung.
- Die Methode wird von allen modernen Browsern unterstützt. Der alte Internet Explorer kannte kein SMIL.