Signatur
SVGSVGElement.prototype.animationsPaused()
Beschreibung
Die Methode animationsPaused() der Schnittstelle SVGSVGElement meldet, ob die Animationszeitleiste des SVG-Dokumentfragments gerade angehalten ist. Das Fragment ist das <svg>-Element mit seinem gesamten Unterbaum. Betroffen sind nur deklarative SMIL-Animationen, also <animate>, <animateTransform>, <animateMotion> und <set>.
Normalerweise nutzt man sie zusammen mit pauseAnimations() und unpauseAnimations(), etwa für einen Wiedergabe-/Pause-Umschalter. Die Methode ändert nichts, sie liest nur den aktuellen Zustand aus.
CSS-Animationen und -Übergänge sowie Animationen der Web Animations API (element.animate()) sind davon nicht betroffen. Sie haben eine eigene Zeitleiste und liefern hier kein Ergebnis.
Rückgabewert
Typ
boolean
Beschreibung
true, wenn die Animationen des SVG-Fragments pausiert sind, sonst false.Beispiele
Pausenzustand abfragen
const svg = document.querySelector('svg');
console.log(svg.animationsPaused()); // Standard: läuft
svg.pauseAnimations();
console.log(svg.animationsPaused());false
true
Wiedergabe-/Pause-Umschalter für eine SMIL-Animation
// HTML: <svg id="loader" width="100" height="100">
// <circle cx="50" cy="50" r="20" fill="teal">
// <animate attributeName="r" values="20;40;20" dur="2s" repeatCount="indefinite"/>
// </circle>
// </svg>
// <button id="toggle">Pause</button>
const svg = document.getElementById('loader');
const button = document.getElementById('toggle');
button.addEventListener('click', () => {
if (svg.animationsPaused()) {
svg.unpauseAnimations();
button.textContent = 'Pause';
} else {
svg.pauseAnimations();
button.textContent = 'Abspielen';
}
});Animationen anhalten, solange der Tab nicht sichtbar ist
const svg = document.querySelector('svg');
let pausedByUser = false;
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// merken, ob der Nutzer schon selbst pausiert hat
pausedByUser = svg.animationsPaused();
svg.pauseAnimations();
} else if (!pausedByUser) {
svg.unpauseAnimations();
}
console.log('Pausiert:', svg.animationsPaused());
});Pausiert: true (beim Verlassen des Tabs)
// Wichtig · Fallstricke
- Nur SMIL: CSS-Animationen und Animationen der Web Animations API sind nicht betroffen. Für sie nutzt man
animation-play-stateoderAnimation.pause()bzw.Animation.playState. - Der Zustand gilt für das gesamte Fragment des jeweiligen
<svg>-Elements, nicht für einzelne Animationselemente. Bei verschachtelten<svg>-Elementen ist das äußerste Element maßgeblich, weil es die Zeitleiste besitzt. - Wird ein SVG per
<img>oder als CSS-Hintergrund eingebunden, kommt man per Script nicht an das Element heran. Nötig ist Inline-SVG,<object>oder<iframe>(bei<object>und<iframe>übercontentDocument, und nur bei gleicher Herkunft). - Kompatibilität: Die Methode wird in allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Im alten Internet Explorer gab es keine SMIL-Unterstützung.