SVGAnimateElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGAnimateElement extends SVGAnimationElement

Beschreibung

SVGAnimateElement ist die DOM-Schnittstelle für das SVG-Element <animate>. Mit diesem Element (SMIL-Animation) ändert man ein Attribut oder eine Eigenschaft des Elternelements (oder des über href angegebenen Ziels) deklarativ über die Zeit, z. B. r, opacity, fill oder x.

Die Schnittstelle bringt selbst keine eigenen Eigenschaften oder Methoden mit. Alles Nützliche erbt sie von SVGAnimationElement: die Eigenschaft targetElement sowie die Methoden beginElement(), beginElementAt(), endElement(), endElementAt(), getStartTime(), getCurrentTime() und getSimpleDuration(). Dazu kommen die Ereignisse beginEvent, endEvent und repeatEvent.

In JavaScript nutzt man die Schnittstelle vor allem, um SVG-Animationen per Skript zu starten und zu stoppen (etwa mit begin="indefinite") oder um auf den Start und das Ende einer Animation zu reagieren. Neue Elemente legt man mit document.createElementNS("http://www.w3.org/2000/svg", "animate") an, nicht mit einem Konstruktor.

Rückgabewert

Typ

SVGAnimateElement

Beschreibung

Instanzen bekommt man über DOM-Abfragen (z. B. querySelector("animate")) oder über document.createElementNS().

Beispiele

Element dynamisch erzeugen und anhängen

const SVG_NS = "http://www.w3.org/2000/svg";
const circle = document.querySelector("#kreis");

const anim = document.createElementNS(SVG_NS, "animate");
anim.setAttribute("attributeName", "r");
anim.setAttribute("from", "10");
anim.setAttribute("to", "40");
anim.setAttribute("dur", "1.5s");
anim.setAttribute("repeatCount", "indefinite");

circle.appendChild(anim);
console.log(anim instanceof SVGAnimateElement);
console.log(anim.targetElement === circle);

true true

Animation per Knopfdruck starten und stoppen

// HTML: <svg><rect id="box" width="50" height="50">
//   <animate id="fade" attributeName="opacity" from="1" to="0"
//            dur="2s" begin="indefinite" fill="freeze" />
// </rect></svg>
const fade = document.querySelector("#fade");

document.querySelector("#start").addEventListener("click", () => {
  fade.beginElement();
});
document.querySelector("#stop").addEventListener("click", () => {
  fade.endElement();
});

Auf Start, Wiederholung und Ende reagieren

const anim = document.querySelector("animate");

anim.addEventListener("beginEvent", () => {
  console.log("Start bei", anim.getStartTime(), "s");
});
anim.addEventListener("repeatEvent", () => {
  console.log("Wiederholung, aktuelle Zeit:", anim.getCurrentTime().toFixed(2));
});
anim.onend = () => console.log("Animation beendet");

console.log("Einfache Dauer:", anim.getSimpleDuration(), "s");

Einfache Dauer: 2 s Start bei 0 s Animation beendet

// Wichtig · Fallstricke

Namensraum: document.createElement(\"animate\") erzeugt ein wirkungsloses HTMLUnknownElement. Man muss createElementNS() mit dem SVG-Namensraum verwenden.
Kein Konstruktor: new SVGAnimateElement() wirft einen TypeError („Illegal constructor“).
getSimpleDuration() wirft einen NotSupportedError, wenn die Dauer unbestimmt ist (z. B. wenn dur fehlt oder \"indefinite\" ist).
Die Ereignisnamen lauten beginEvent/endEvent/repeatEvent, die zugehörigen Handler-Eigenschaften aber onbegin/onend/onrepeat.
Die Zeiten sind relativ zur Dokument-Zeitleiste des <svg>-Wurzelelements. Diese lässt sich mit svg.pauseAnimations() anhalten und mit setCurrentTime() verschieben.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Der alte Internet Explorer kannte kein SMIL. Für CSS-fähige Eigenschaften sind CSS-Animationen oder die Web Animations API (element.animate()) oft leichter zu warten.
prefers-reduced-motion wird bei SMIL nicht automatisch beachtet. Man sollte es selbst per matchMedia() prüfen und die Animation bei Bedarf beenden.

Siehe auch

SVGAnimationElement SVGAnimateTransformElement SVGAnimateMotionElement SVGSetElement SVGAnimationElement.prototype.beginElement() Document.prototype.createElementNS() Element.prototype.animate()