SVGSVGElement.createSVGMatrix() — Methode · JavaScript-Referenz

Signatur

SVGSVGElement.prototype.createSVGMatrix()

Beschreibung

Die Methode createSVGMatrix() eines <svg>-Elements erzeugt ein neues Matrix-Objekt, das mit der Einheitsmatrix initialisiert ist (a=1, b=0, c=0, d=1, e=0, f=0). Das Objekt ist an keinen Knoten im Dokumentbaum gebunden – Änderungen daran wirken sich also nicht auf die Darstellung aus, bis man es explizit einer Transformation zuweist.

Typische Einsatzgebiete sind das Umrechnen von Koordinaten zwischen Bildschirm- und SVG-Koordinatensystem (zusammen mit getScreenCTM() und createSVGPoint()), das Zusammensetzen komplexer Transformationen mit translate(), scale(), rotate() und multiply() sowie das Befüllen von SVGTransform-Objekten über createSVGTransformFromMatrix() oder transform.setMatrix().

In SVG 2 wurde SVGMatrix durch DOMMatrix aus der Geometry-Interfaces-Spezifikation ersetzt. Moderne Browser geben daher ein DOMMatrix-Objekt zurück. Für neuen Code ist der direkte Konstruktor new DOMMatrix() meist die bessere Wahl, da er keine SVG-Elementinstanz benötigt; createSVGMatrix() bleibt aber aus Kompatibilitätsgründen verfügbar.

Rückgabewert

Typ

DOMMatrix

Beschreibung

Eine neue Einheitsmatrix (in älteren Browsern ein SVGMatrix-Objekt), die nicht mit dem Dokument verknüpft ist.

Beispiele

Einheitsmatrix erzeugen und transformieren

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
const m = svg.createSVGMatrix();
console.log(m.a, m.b, m.c, m.d, m.e, m.f);

// Methoden liefern jeweils eine NEUE Matrix zurück
const moved = m.translate(50, 20).scale(2);
console.log(moved.a, moved.d, moved.e, moved.f);

1 0 0 1 0 0 2 2 50 20

Mausposition in SVG-Koordinaten umrechnen

const svg = document.querySelector('svg');

svg.addEventListener('click', (event) => {
  const pt = svg.createSVGPoint();
  pt.x = event.clientX;
  pt.y = event.clientY;
  // Inverse der Bildschirm-Transformation anwenden
  const inverse = svg.getScreenCTM().inverse();
  const svgPt = pt.matrixTransform(inverse);
  console.log(`SVG-Koordinaten: ${svgPt.x.toFixed(1)}, ${svgPt.y.toFixed(1)}`);
});

SVG-Koordinaten: 120.0, 85.5

Matrix als Transformation auf ein Element anwenden

const svg = document.querySelector('svg');
const rect = svg.querySelector('rect');

const matrix = svg.createSVGMatrix()
  .translate(100, 100)
  .rotate(45)
  .translate(-25, -25);

const transform = svg.createSVGTransformFromMatrix(matrix);
rect.transform.baseVal.initialize(transform);

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

matrix(0.707107 0.707107 -0.707107 0.707107 100 64.6447)

// Wichtig · Fallstricke

Unveränderliche Methoden: translate(), scale(), rotate(), multiply() und inverse() ändern die Matrix nicht, sondern geben eine neue zurück. Wer das Ergebnis nicht zuweist, verliert es. Veränderliche Varianten gibt es nur auf DOMMatrix (translateSelf(), scaleSelf() usw.).
Winkel in Grad: rotate() erwartet Grad, nicht Bogenmaß.
Kompatibilität: Die Methode wird von allen gängigen Browsern unterstützt, gilt in SVG 2 aber als Altlast. Für neuen Code new DOMMatrix() bevorzugen. In älteren Browsern ist das Rückgabeobjekt ein SVGMatrix ohne die erweiterten DOMMatrix-Methoden.
Die Methode existiert nur auf <svg>-Elementen (SVGSVGElement), nicht auf beliebigen SVG-Elementen; in Node.js ohne DOM-Implementierung ist sie nicht verfügbar.
Das Aufrufen von inverse() auf einer nicht invertierbaren Matrix (z. B. scale(0)) liefert je nach Implementierung NaN-Werte oder wirft (älteres SVGMatrix) eine Ausnahme.

Siehe auch

DOMMatrix SVGSVGElement.createSVGPoint() SVGSVGElement.createSVGTransformFromMatrix() SVGGraphicsElement.getScreenCTM() SVGSVGElement SVGSVGElement.deselectAll()