SVGSVGElement.unpauseAnimations() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.unpauseAnimations()

Beschreibung

Die Methode unpauseAnimations() der Schnittstelle SVGSVGElement setzt die Animationsuhr eines SVG-Dokumentfragments wieder in Gang. Alle deklarativen SMIL-Animationen innerhalb dieses <svg>-Elements, also <animate>, <animateTransform>, <animateMotion> und <set>, laufen an genau der Stelle weiter, an der sie mit pauseAnimations() angehalten wurden.

Die Methode ist das Gegenstück zu pauseAnimations(). Zusammen eignen sie sich für Play/Pause-Schaltflächen, zum Anhalten von Animationen, wenn das Element nicht sichtbar ist, oder um die Einstellung prefers-reduced-motion zu berücksichtigen. Ob die Animationen gerade angehalten sind, prüfst du mit animationsPaused().

Die Methode wirkt nur auf das äußerste <svg>-Element eines Fragments, das die gemeinsame Zeitleiste besitzt. Ruft man sie auf, wenn die Animationen gar nicht pausiert sind, passiert nichts.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Pausierte Animationen fortsetzen

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

svg.pauseAnimations();
console.log(svg.animationsPaused()); // true

// Nach 2 Sekunden weiterlaufen lassen
setTimeout(() => {
  svg.unpauseAnimations();
  console.log(svg.animationsPaused());
}, 2000);

true false

Play/Pause-Schaltfläche

// HTML: <svg id="loader">...<animateTransform .../></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';
  }
});

Nur animieren, solange das SVG sichtbar ist

const svg = document.querySelector('#hero-illustration');

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    svg.unpauseAnimations();
  } else {
    svg.pauseAnimations();
  }
});

observer.observe(svg);

Reduzierte Bewegung berücksichtigen

const svg = document.querySelector('svg');
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');

const apply = () => {
  mq.matches ? svg.pauseAnimations() : svg.unpauseAnimations();
};

apply();
mq.addEventListener('change', apply);

// Wichtig · Fallstricke

Nur SMIL: Die Methode steuert ausschließlich deklarative SVG-Animationen. CSS-Animationen und -Übergänge sowie Animationen über die Web Animations API (element.animate()) sind nicht betroffen. Diese steuerst du über animation-play-state bzw. Animation.play().
Äußeres <svg>: Rufe die Methode am äußersten <svg>-Element auf. Bei verschachtelten <svg>-Elementen gilt die Zeitleiste des äußeren Elements.
Extern eingebundene SVGs: Bei <img src="bild.svg"> oder CSS-Hintergrundbildern gibt es keinen Skriptzugriff. Bei <object> oder <iframe> kommst du über contentDocument.documentElement an das Element, allerdings nur bei gleichem Ursprung (Same-Origin-Policy).
Die Methode ist idempotent: Mehrfaches Aufrufen schadet nicht. Die Animationen springen beim Fortsetzen nicht vor, die pausierte Zeit wird nicht nachgeholt.
Wird in allen modernen Browsern unterstützt. Der alte Internet Explorer unterstützte SMIL nicht.

Siehe auch

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