Signatur
Beschreibung
Die Eigenschaft matrix eines SVGTransform-Objekts gibt die affine 2D-Transformationsmatrix zurück, die der Transformation entspricht, egal welchen Typ (type) sie hat. Das gilt also auch für translate(), scale(), rotate(), skewX() und skewY(). Die Matrix hat die sechs Komponenten a, b, c, d, e und f und entspricht der Form matrix(a b c d e f) im transform-Attribut.
Ein paar Beispiele: Bei translate(tx, ty) stehen die Verschiebungen in e und f. Bei scale(sx, sy) stehen die Faktoren in a und d. Bei rotate(θ) gilt a = cos θ, b = sin θ, c = −sin θ und d = cos θ. So kannst du Transformationen einheitlich auswerten, ohne jeden Typ einzeln zu behandeln.
Die Eigenschaft selbst ist nur lesbar. Das zurückgegebene Objekt ist aber live: Änderst du seine Komponenten (z. B. matrix.e = 100), ändert sich direkt die Transformation und damit das transform-Attribut des Elements. Laut SVG 2 wird der Typ dabei auf SVG_TRANSFORM_MATRIX gesetzt. Eine ganz neue Matrix setzt du mit SVGTransform.setMatrix().
Häufig nutzt man die Eigenschaft zusammen mit SVGTransformList.consolidate(). Diese Methode fasst alle Transformationen einer Liste zu einer einzigen zusammen, deren matrix dann die gesamte Transformation enthält.
Rückgabewert
a bis f. Änderungen daran wirken sich direkt auf die Transformation aus.Beispiele
Matrix einer scale-Transformation auslesen
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const rect = document.createElementNS(NS, 'rect');
rect.setAttribute('transform', 'scale(2, 3)');
svg.append(rect);
document.body.append(svg);
const t = rect.transform.baseVal.getItem(0);
const { a, b, c, d, e, f } = t.matrix;
console.log(t.type === SVGTransform.SVG_TRANSFORM_SCALE, [a, b, c, d, e, f]);Mehrere Transformationen zu einer Matrix zusammenfassen
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const g = document.createElementNS(NS, 'g');
g.setAttribute('transform', 'translate(10, 20) scale(2)');
svg.append(g);
document.body.append(svg);
// consolidate() fasst die Liste zu einer einzigen Matrix-Transformation zusammen
const combined = g.transform.baseVal.consolidate();
const m = combined.matrix;
console.log(`a=${m.a} d=${m.d} e=${m.e} f=${m.f}`);
console.log(g.getAttribute('transform'));Live-Matrix ändern, um ein Element zu verschieben
const NS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(NS, 'svg');
const circle = document.createElementNS(NS, 'circle');
circle.setAttribute('r', '10');
circle.setAttribute('transform', 'translate(0, 0)');
svg.append(circle);
document.body.append(svg);
const t = circle.transform.baseVal.getItem(0);
// Direkte Änderung am Live-Objekt wirkt sofort auf das Element
t.matrix.e = 50;
t.matrix.f = 25;
console.log(t.type === SVGTransform.SVG_TRANSFORM_MATRIX);
console.log(circle.getAttribute('transform'));// Wichtig · Fallstricke
- Nur lesbar, aber live: Eine Zuweisung wie
t.matrix = …hat keine Wirkung (im Strict Mode gibt es einenTypeError). Nimm stattdessensetMatrix()oder ändere die einzelnen Komponenten. - Typwechsel: Wenn du Komponenten änderst, wird der Typ laut SVG 2 zu
SVG_TRANSFORM_MATRIXundanglezu0. Ältere Browser setzen das teilweise unterschiedlich um. Verlasse dich also nicht darauf, dasstypegleich bleibt. - SVGMatrix vs. DOMMatrix: In SVG 2 ist
SVGMatrixein Alias fürDOMMatrix. Methoden wiemultiply()oderinverse()geben neue Objekte zurück, die nicht an das Element gebunden sind. - Rundung: Bei Rotationen kommen Gleitkomma-Werte wie
6.123e-17statt0heraus. Runde die Werte für Vergleiche. - baseVal vs. animVal: Nur Transformationen aus
transform.baseValkann man ändern.animValist nur lesbar. CSS-Transformationen (style.transform) tauchen hier nicht auf. - Wird in allen modernen Browsern unterstützt.