SVGTransformList.createSVGTransformFromMatrix() — Methode · JavaScript-Referenz

Signatur

SVGTransformList.prototype.createSVGTransformFromMatrix(matrix)

Beschreibung

Die Methode createSVGTransformFromMatrix() einer SVGTransformList erzeugt ein neues, eigenständiges SVGTransform-Objekt. Der Typ dieses Objekts ist SVGTransform.SVG_TRANSFORM_MATRIX, und die sechs Matrixwerte a bis f werden aus dem übergebenen Argument übernommen. Das Argument kann ein SVGMatrix, ein DOMMatrix oder (nach SVG 2) ein einfaches Objekt nach dem Muster von DOMMatrix2DInit sein.

Wichtig: Die Methode legt das Objekt nur an. Sie fügt es nicht in die Liste ein. Um es auf ein Element anzuwenden, übergibst du es anschließend an appendItem(), insertItemBefore(), replaceItem() oder initialize(). Die Werte werden kopiert, nicht verknüpft. Änderst du die Ausgangsmatrix später, bleibt das erzeugte SVGTransform davon unberührt.

Die Methode eignet sich vor allem, wenn du eine bereits berechnete Matrix direkt als Transformation auf ein SVG-Element anwenden willst, ohne sie in translate, rotate oder scale zu zerlegen. Typische Fälle sind Drag-and-drop, Zoom und Schwenken sowie das Übernehmen der Transformation eines anderen Elements. An die Liste eines Elements kommst du über element.transform.baseVal.

Parameter

Name	Typ	Default	Beschreibung
$matrix Pflicht	SVGMatrix \| DOMMatrix \| DOMMatrix2DInit		Die Matrix, deren Werte `a`, `b`, `c`, `d`, `e` und `f` in das neue `SVGTransform` kopiert werden.

Rückgabewert

Typ

SVGTransform

Beschreibung

Ein neues SVGTransform vom Typ SVG_TRANSFORM_MATRIX, das noch zu keiner Liste gehört.

Beispiele

Matrix erzeugen und an ein Element anhängen

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

// Matrix: um 50/20 verschieben und doppelt so groß skalieren
const m = svg.createSVGMatrix().translate(50, 20).scale(2);
const t = list.createSVGTransformFromMatrix(m);

console.log(t.type === SVGTransform.SVG_TRANSFORM_MATRIX);
list.appendItem(t);
console.log(rect.getAttribute('transform'));

true matrix(2 0 0 2 50 20)

DOMMatrix verwenden und alle bisherigen Transformationen ersetzen

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

const dm = new DOMMatrix().rotate(45).translate(10, 0);
// initialize() leert die Liste und setzt genau diesen einen Eintrag
list.initialize(list.createSVGTransformFromMatrix(dm));

console.log(list.numberOfItems);

1

Werte werden kopiert, nicht verknüpft

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

const m = svg.createSVGMatrix();
m.e = 100;
const t = list.createSVGTransformFromMatrix(m);

m.e = 999; // Änderung an der Ausgangsmatrix
console.log(t.matrix.e);

100

// Wichtig · Fallstricke

Das erzeugte Objekt gehört noch zu keiner Liste. Auf das Element wirkt es erst, wenn du es mit appendItem(), insertItemBefore(), replaceItem() oder initialize() einfügst.
Nur die 2D-Werte a bis f werden übernommen. 3D-Anteile einer DOMMatrix gehen verloren.
Einfache Objekte wie {a: 1, b: 0, …} als Argument gibt es erst seit SVG 2. Ältere Browser erwarten ein SVGMatrix. Am sichersten erzeugst du es mit svg.createSVGMatrix().
Verändere die Liste unter baseVal, nicht unter animVal. animVal ist schreibgeschützt, ein Schreibversuch löst eine NoModificationAllowedError-Ausnahme aus.
Eine gleichwertige Methode gibt es auch auf dem Wurzelelement: SVGSVGElement.createSVGTransformFromMatrix().

Siehe auch

SVGTransformList SVGTransform SVGTransformList.appendItem() SVGTransformList.initialize() SVGTransformList.consolidate() SVGSVGElement.createSVGMatrix()