SVGSVGElement.createSVGTransform() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.createSVGTransform()

Beschreibung

createSVGTransform() ist eine Fabrikmethode des <svg>-Elements (SVGSVGElement). Sie liefert ein neues SVGTransform-Objekt, das noch keinem Element und keiner Liste zugeordnet ist. Die Transformation ist anfangs die Identität: Typ SVG_TRANSFORM_MATRIX mit der Matrix [1 0 0 1 0 0], also ohne sichtbare Wirkung.

Gebraucht wird die Methode vor allem, wenn man das transform-Attribut eines SVG-Elements über das Objektmodell ändern will, statt Zeichenketten wie "translate(10 20) rotate(45)" zusammenzubauen. Man erzeugt ein Transform-Objekt, legt über setTranslate(), setRotate(), setScale(), setSkewX(), setSkewY() oder setMatrix() seine Art fest und fügt es dann mit element.transform.baseVal.appendItem() (oder insertItemBefore(), replaceItem()) in die Liste ein.

Das ist vor allem bei interaktiven Grafiken und Animationen praktisch: Man behält eine Referenz auf den eingefügten Transform und ruft in jedem Frame nur noch z. B. setRotate() auf. Das Attribut wird vom Browser automatisch aktualisiert, ohne dass man Zeichenketten erneut parsen muss.

Rückgabewert

Typ

SVGTransform

Beschreibung

Ein neues SVGTransform-Objekt vom Typ SVGTransform.SVG_TRANSFORM_MATRIX (Wert 1), dessen matrix die Einheitsmatrix ist und dessen angle 0 beträgt.

Beispiele

Neuen Transform erzeugen und prüfen

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const t = svg.createSVGTransform();

console.log(t.type === SVGTransform.SVG_TRANSFORM_MATRIX);
const { a, b, c, d, e, f } = t.matrix;
console.log([a, b, c, d, e, f]);
console.log(t.angle);

true [1, 0, 0, 1, 0, 0] 0

Verschieben und Drehen über die Transformationsliste

const svg = document.querySelector('svg');
const rect = svg.querySelector('rect');
const list = rect.transform.baseVal;

const move = svg.createSVGTransform();
move.setTranslate(50, 30);
list.appendItem(move);

const turn = svg.createSVGTransform();
turn.setRotate(45, 25, 25); // 45° um den Punkt (25|25)
list.appendItem(turn);

console.log(rect.getAttribute('transform'));

translate(50 30) rotate(45 25 25) (genaue Formatierung browserabhängig)

Flüssige Drehanimation ohne Zeichenketten-Parsing

const svg = document.querySelector('svg');
const gear = svg.querySelector('#zahnrad');

// Rückgabewert von appendItem verwenden – das ist das Objekt in der Liste
const rotation = gear.transform.baseVal.appendItem(svg.createSVGTransform());

const tick = (time) => {
  const angle = (time / 10) % 360;
  rotation.setRotate(angle, 100, 100);
  requestAnimationFrame(tick);
};
requestAnimationFrame(tick);

// Wichtig · Fallstricke

Nur auf <svg>-Elementen verfügbar: Die Methode gehört zu SVGSVGElement. Auf <rect>, <g> usw. gibt es sie nicht. Nimm dafür element.ownerSVGElement.createSVGTransform().
Allein bewirkt es nichts: Der erzeugte Transform wirkt erst, wenn er in die Liste transform.baseVal eines Elements eingefügt wird. transform.animVal ist schreibgeschützt.
Referenz aus appendItem() verwenden: Wenn ein Objekt schon in einer anderen Liste steckt, gehen die Browser beim Einfügen unterschiedlich damit um (verschieben oder kopieren). Am sichersten ist es, den Rückgabewert von appendItem() bzw. insertItemBefore() für spätere Änderungen zu verwenden.
Die Reihenfolge ist wichtig: Die Transformationen in der Liste werden wie im Attribut von links nach rechts verkettet. translate vor rotate ergibt ein anderes Bild als umgekehrt.
Ab einer fertigen Matrix: Wenn du schon eine DOMMatrix oder SVGMatrix hast, ist createSVGTransformFromMatrix() kürzer.
CSS-Transformationen: Eine CSS-Eigenschaft transform auf dem Element überschreibt das Attribut und damit auch Änderungen über transform.baseVal.
Browserunterstützung: Die Methode gibt es in allen modernen Browsern. Sie gehört zur SVG-DOM-Schnittstelle und steht in Node.js nur mit DOM-Umgebungen wie jsdom bereit, dort aber meist nur teilweise.

Siehe auch

SVGSVGElement SVGTransform SVGTransformList SVGSVGElement.createSVGTransformFromMatrix() SVGSVGElement.createSVGMatrix() SVGTransformList.appendItem() SVGTransform.setRotate()