SVGAnimateTransformElement — Schnittstelle · JavaScript-Referenz

Signatur

interface SVGAnimateTransformElement extends SVGAnimationElement

Beschreibung

SVGAnimateTransformElement ist die Schnittstelle für <animateTransform>-Elemente in einem SVG-Dokument. Mit diesem Element animiert man deklarativ (SMIL) Transformationen wie rotate, scale, translate, skewX und skewY. Welche Transformation gemeint ist, legt das Attribut type fest. Die Werte kommen aus from/to, by oder values.

Die Schnittstelle hat keine eigenen Eigenschaften oder Methoden. Alles erbt sie von SVGAnimationElement, zum Beispiel beginElement(), endElement(), getStartTime(), getCurrentTime(), getSimpleDuration() und die Eigenschaft targetElement. Außerdem stehen die Ereignisse beginEvent, endEvent und repeatEvent zur Verfügung.

Aus JavaScript steuert man die Animation, indem man sie mit begin="indefinite" anlegt und dann per beginElement() startet. Man kann das Element auch dynamisch über document.createElementNS() erzeugen. Das lohnt sich für einfache, deklarative Animationen ohne CSS oder die Web Animations API, etwa für Lade-Symbole.

Parameter

Name	Typ	Default	Beschreibung
$attributeName Pflicht	string		Muss `transform` sein (bei Verläufen `gradientTransform`, bei Mustern `patternTransform`).
$type	"translate" \| "scale" \| "rotate" \| "skewX" \| "skewY"	translate	Art der Transformation, die animiert wird.
$from / to / by / values	string		Start-, End- oder Differenzwerte bzw. eine Werteliste mit Semikolon als Trenner, z. B. `0 50 50;360 50 50`.
$additive	"replace" \| "sum"	replace	`sum` hängt die Animation an die vorhandene Transformation an, `replace` ersetzt sie.

Rückgabewert

Typ

SVGAnimateTransformElement

Beschreibung

Die Instanz erhält man über document.createElementNS('http://www.w3.org/2000/svg', 'animateTransform') oder per DOM-Abfrage.

Beispiele

Rotations-Animation dynamisch erzeugen

const SVG_NS = 'http://www.w3.org/2000/svg';
const rect = document.querySelector('#spinner');

const anim = document.createElementNS(SVG_NS, 'animateTransform');
anim.setAttribute('attributeName', 'transform');
anim.setAttribute('type', 'rotate');
anim.setAttribute('from', '0 50 50');
anim.setAttribute('to', '360 50 50');
anim.setAttribute('dur', '1s');
anim.setAttribute('repeatCount', 'indefinite');
rect.appendChild(anim);

console.log(anim instanceof SVGAnimateTransformElement);

true

Animation per Klick starten (begin="indefinite")

// HTML: <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="20">
//   <animateTransform id="pulse" attributeName="transform" type="scale"
//     values="1;1.3;1" dur="0.6s" begin="indefinite" additive="sum"/>
// </circle></svg>
const pulse = document.getElementById('pulse');

document.querySelector('circle').addEventListener('click', () => {
  pulse.beginElement();
  console.log('Dauer:', pulse.getSimpleDuration(), 's');
});

Dauer: 0.6 s

Auf Ende und Wiederholungen reagieren

const anim = document.querySelector('animateTransform');

anim.addEventListener('beginEvent', () => console.log('Start'));
anim.addEventListener('repeatEvent', (e) => console.log('Wiederholung', e.detail));
anim.addEventListener('endEvent', () => {
  console.log('Fertig, Ziel:', anim.targetElement.tagName);
});

Start Wiederholung 1 Fertig, Ziel: rect

// Wichtig · Fallstricke

Ohne additive="sum" ersetzt die Animation ein vorhandenes transform-Attribut. Das Element springt dann oft an eine unerwartete Position.
Bei type="rotate" dreht sich das Element ohne Angabe von Mittelpunktkoordinaten ("winkel cx cy") um den Ursprung (0,0) des Koordinatensystems.
Man muss createElementNS mit dem SVG-Namensraum verwenden. document.createElement('animateTransform') erzeugt nur ein unbekanntes HTML-Element.
SMIL wird in allen modernen Browsern unterstützt (Chrome hat die geplante Abkündigung zurückgenommen). Der Internet Explorer und das alte Edge unterstützen es nicht. Für komplexe oder dynamische Animationen sind CSS-Transformationen oder Element.animate() oft flexibler.
Eine CSS-Eigenschaft transform am selben Element kann mit der SMIL-Animation in Konflikt geraten.

Siehe auch

Element.prototype.animate() SVGAnimateColorElement SVGAnimatedTransformList SVGAnimateMotionElement SVGAnimateElement