Signatur
Beschreibung
Die Methode createSVGTransformFromMatrix() eines <svg>-Elements erzeugt ein neues SVGTransform-Objekt, das noch keinem Element zugeordnet ist. Die Transformation hat den Typ SVGTransform.SVG_TRANSFORM_MATRIX (Wert 1), und ihre Werte a bis f werden aus der übergebenen Matrix kopiert. Spätere Änderungen an der Ausgangsmatrix wirken sich also nicht auf die Transformation aus.
Gebraucht wird sie vor allem, wenn man eine berechnete Matrix, etwa aus getCTM(), getScreenCTM() oder einer Verkettung mehrerer DOMMatrix-Operationen, in die Transformationsliste eines Elements (element.transform.baseVal) einfügen will. Übliche Einsatzfälle sind Drag-and-Drop, Zoomen und Schwenken in SVG-Editoren oder das Zusammenfassen mehrerer Transformationen zu einer einzigen.
Das Ergebnis lässt sich mit SVGTransformList.appendItem(), insertItemBefore(), replaceItem() oder initialize() an ein Element hängen. Ein kürzerer Weg ist SVGTransformList.createSVGTransformFromMatrix() zusammen mit consolidate(). Das Gleiche erreicht man auch mit createSVGTransform() und einem anschließenden setMatrix().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $matrix Pflicht | DOMMatrix | DOMMatrixReadOnly | SVGMatrix | DOMMatrix2DInit | Die Matrix, deren Werte a, b, c, d, e und f in die neue Transformation kopiert werden. Seit SVG 2 ist auch ein einfaches Objekt nach dem Muster von DOMMatrix2DInit möglich, z. B. { a: 1, d: 1, e: 10 }. |
Rückgabewert
SVGTransform-Objekt mit type === 1 (SVG_TRANSFORM_MATRIX) und einer Kopie der übergebenen Matrix.Beispiele
Transformation aus einer DOMMatrix erzeugen und anhängen
const svg = document.querySelector('svg');
const rect = svg.querySelector('rect');
// Verschieben und drehen zu einer Matrix verketten
const matrix = new DOMMatrix().translate(50, 20).rotate(30);
const transform = svg.createSVGTransformFromMatrix(matrix);
rect.transform.baseVal.appendItem(transform);
console.log(transform.type === SVGTransform.SVG_TRANSFORM_MATRIX);
console.log(rect.getAttribute('transform'));Die Matrix wird kopiert, nicht referenziert
const svg = document.querySelector('svg');
const m = new DOMMatrix([1, 0, 0, 1, 10, 10]);
const t = svg.createSVGTransformFromMatrix(m);
m.e = 999; // die Ausgangsmatrix nachträglich ändern
console.log(t.matrix.e);Mehrere Transformationen durch eine einzige ersetzen (Drag-Verschiebung)
const svg = document.querySelector('svg');
const shape = svg.querySelector('#shape');
const moveBy = (dx, dy) => {
const list = shape.transform.baseVal;
// Aktuelle Gesamtmatrix ermitteln (oder die Einheitsmatrix, wenn die Liste leer ist)
const current = list.numberOfItems
? list.consolidate().matrix
: new DOMMatrix();
// Verschiebung vorn anfügen, damit sie im Koordinatensystem des Elternelements wirkt
const next = new DOMMatrix().translate(dx, dy).multiply(current);
list.initialize(svg.createSVGTransformFromMatrix(next));
};
moveBy(25, 0);
console.log(shape.transform.baseVal.numberOfItems);// Wichtig · Fallstricke
- Kopie statt Referenz: Die Werte der Matrix werden beim Aufruf kopiert. Wer die Transformation später ändern will, nutzt
transform.setMatrix()oder die MethodensetTranslate(),setRotate()usw. - Nur 2D: SVG-Transformationen kennen nur die sechs Werte
abisf. 3D-Anteile einerDOMMatrixwerden verworfen. Eine Matrix mitis2D === falseführt in manchen Browsern zu einem Fehler. - Freistehend: Das Objekt ist erst dann sichtbar, wenn es in eine
SVGTransformListeingefügt wurde. Fügt man es in eine zweite Liste ein, wird es aus der ersten entfernt. - Kompatibilität: Die Methode wird von allen modernen Browsern unterstützt. Ältere Browser erwarten ein
SVGMatrix-Objekt, das man mitsvg.createSVGMatrix()erzeugt. In aktuellen Browsern istSVGMatrixnur noch ein Alias fürDOMMatrix. - Die Methode gibt es nur auf
SVGSVGElement(dem<svg>-Element) und aufSVGTransformList, nicht auf anderen SVG-Elementen.