Transformationsmatrix – SVG-Codebeispiele

Eine SVG-Transformationsmatrix drückt translation, scaling, rotation und skewing als eine einzige matrix(a,b,c,d,e,f)-Transformation aus. Das ist nützlich, wenn mehrere Transformationen kombiniert, berechnet oder aus Grafiktools exportiert werden müssen. Wenn Sie nur eine einfache Verschiebung, Größenänderung oder Drehung brauchen, sind die getrennten transform functions in SVG-Transformationen meist leichter zu lesen.

In diesem Artikel lernen Sie:

Die sechs Werte in matrix(a,b,c,d,e,f) zu lesen.
Matrixwerte für translation, scaling, rotation und skewing zu verwenden.
Um einen gewählten pivot point zu skalieren oder zu drehen.
Häufige Matrixfehler mit Ursprung, Reihenfolge und skew-Werten zu vermeiden.
Zwischen lesbaren transform functions und einer berechneten Matrix zu wählen.

Grundlagen der Transformationsmatrix

Die SVG-Transformationsmatrix ist eine 3×3-Matrix, die translation, scaling, rotation und skewing kombiniert. In der SVG-Syntax matrix(a,b,c,d,e,f) werden nur die ersten sechs Werte geschrieben:

Die Transformationsmatrix ist 3x3

Parameter	Typische Verwendung	SVG-Symbol
a	Skalierungsfaktor auf der X-Achse oder Cosinuswert des Rotationswinkels	`sx` / `cos(α)`
b	Skew-Faktor auf der Y-Achse oder Sinuswert des Rotationswinkels	`tan(α)` / `sin(α)`
c	Skew-Faktor auf der X-Achse oder negativer Sinuswert des Rotationswinkels	`tan(α)` / `-sin(α)`
d	Skalierungsfaktor auf der Y-Achse oder Cosinuswert des Rotationswinkels	`sy` / `cos(α)`
e	Translation auf der X-Achse	`tx`
f	Translation auf der Y-Achse	`ty`

Die Matrix transformiert einen Punkt (x prev, y prev) in (x new, y new):

Formel zur Berechnung von Koordinaten mit der Transformationsmatrix

SVG-Elemente verwenden das transform-Attribut mit der Matrixsyntax. Sie übergeben also sechs Werte an die matrix transform function, um translation, scaling, rotation und skewing zu setzen:

transform="matrix(a,b,c,d,e,f)"

So verwenden Sie eine SVG-Transformationsmatrix

Beginnen Sie mit der Identitätsmatrix: matrix(1 0 0 1 0 0).
Ändern Sie e und f, um ein Element um tx und ty zu verschieben.
Ändern Sie a und d, um entlang der x- und y-Achse zu skalieren.
Verwenden Sie Sinus- und Cosinuswerte in a, b, c und d für rotation.
Verwenden Sie b oder c für skewing, je nach Achse.
Passen Sie e und f an, wenn Sie um einen pivot point statt um (0,0) skalieren oder drehen.

Translation Matrix

Translation ist eine SVG-Transformation, die alle Punkte eines Objekts um dieselbe Entfernung entlang paralleler Linien verschiebt. Diese Transformation verschiebt den Ursprung des Koordinatensystems des Elements. Die translation matrix sieht so aus:

Translation-matrix-Formel

matrix(1,0,0,1,tx,ty)

Die translation matrix kombiniert tx und ty, um ein Element horizontal und vertikal zu verschieben. Sie verschiebt das Objekt um tx entlang der x-Achse und um ty entlang der y-Achse.

Betrachten Sie das Beispiel mit dem ursprünglichen blauen Kreis, der entlang der x-Achse (rot), y-Achse (orange) und beider Achsen (grün) verschoben wird:

 1<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 2    <g fill="none">
 3        <!-- no translation -->
 4        <circle cx="15" cy="15" r="10" stroke="blue" />
 5        <!-- horizontal translation (tx = 30) -->
 6        <circle cx="15" cy="15" r="10" stroke="red" transform="matrix(1 0 0 1 30 0)" />
 7        <!-- vertical translation (ty = 25) -->
 8        <circle cx="15" cy="15" r="10" stroke="orange" transform="matrix(1 0 0 1 0 25)" />
 9        <!-- both horizontal and vertical translation (tx = 30, ty = 25) -->
10        <circle cx="15" cy="15" r="10" stroke="green" transform="matrix(1 0 0 1 30 25)" />
11    </g>
12</svg>

Die Wirkung von transform="matrix(1,0,0,1,tx,ty)" entspricht der Änderung der Objektkoordinaten nach dieser Formel:

x(new) = a·x(prev) + c·y(prev) + e = x(prev) + tx
y(new) = b·x(prev) + d·y(prev) + f = y(prev) + ty

Im Codebeispiel gruppiert das <g>-Element die Kreise, und fill="none" gilt für jeden Kreis innerhalb der Gruppe. Das Bild unten zeigt den ursprünglichen Kreis und drei verschobene Kopien:

Vier Kreise als Illustration einer Translation-Transformation

Scaling Matrix

Scaling ist eine SVG-Transformation, die ein Objekt mit einem Skalierungsfaktor vergrößert oder verkleinert. Eine scaling matrix wird verwendet, um Objekte gleichmäßig oder ungleichmäßig entlang der Koordinatenachsen zu skalieren. sx und sy sind die Skalierungsfaktoren für die x- und y-Achsen. Wenn sx und sy größer als 1 sind, wird das Objekt vergrößert. Wenn sie zwischen 0 und 1 liegen, wird es verkleinert. Wenn die Faktoren unterschiedliche Werte haben, wird das Objekt ungleichmäßig skaliert, was zu Streckung oder Stauchung führt. Die scaling matrix sieht so aus:

Scaling-matrix-Formel

matrix(sx,0,0,sy,0,0)

Betrachten Sie das Beispiel mit dem ursprünglichen blauen Rechteck, das relativ zum Ursprung (0, 0) gleichmäßig und ungleichmäßig skaliert wird, in Abbildungen a und b, und gleichmäßig relativ zum Punkt (10, 10), in Abbildung c:

 1<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
 2	<!-- uniform scale is shown in fig.a -->
 3	<g fill="none">
 4	    <rect x="10" y="10" width="20" height="20" stroke="blue" />
 5		 <rect x="10" y="10" width="20" height="20" stroke="red" transform="matrix(1.5,0,0,1.5,0,0)" />
 6		 <rect x="10" y="10" width="20" height="20" stroke="orange" transform="matrix(2,0,0,2,0,0)" />
 7		 <rect x="10" y="10" width="20" height="20" stroke="green" transform="matrix(0.7,0,0,0.7,0,0)" />
 8	 </g>
 9	 <!-- non-uniform scale is shown in fig.b -->
10	 <g transform="translate(70)">
11		<rect x="10" y="10" width="20" height="20" fill="blue" />
12		<rect x="10" y="10" width="20" height="20" fill="red" transform="matrix(1.5,0,0,2,0,0)" />
13		<rect x="10" y="10" width="20" height="20" fill="orange" transform="matrix(3,0,0,2.5,0,0)" />
14		<rect x="10" y="10" width="20" height="20" fill="green" transform="matrix(0.7,0,0,0.5,0,0)" />
15	 </g>
16	 <!-- uniform scale relative to point (10, 10) is shown in fig.c -->
17	 <g fill="none" transform="translate(170)">
18	    <rect x="10" y="10" width="20" height="20" stroke="blue" />
19	    <rect x="10" y="10" width="20" height="20" stroke="red" transform="matrix(1.5,0,0,1.5,-5,-5)" />
20	    <rect x="10" y="10" width="20" height="20" stroke="orange" transform="matrix(2,0,0,2,-10,-10)" />
21	    <rect x="10" y="10" width="20" height="20" stroke="green" transform="matrix(0.7,0,0,0.7,3,3)" />
22	 </g>
23</svg>

Das resultierende Bild:

Vier Rechtecke als Illustration einer Scaling-Transformation

Der Code oben verwendet die scaling matrix. Die erste Gruppe zeigt gleichmäßige Skalierung (Abb. a), die zweite Gruppe ungleichmäßige Skalierung (Abb. b), und die dritte Gruppe zeigt gleichmäßige Skalierung um den Punkt (10, 10) (Abb. c).

Hinweis: Scaling erfolgt relativ zum Ursprung des Koordinatensystems (0, 0). Wenn das SVG-Objekt nicht am Ursprung positioniert ist, kann scaling auch seine sichtbare Position verschieben. Deshalb scheinen sich die Rechtecke in Abbildungen a und b zu bewegen.

Um um einen bestimmten pivot point (cx, cy) zu skalieren, müssen Sie eine zusätzliche Verschiebung auf die skalierte Form anwenden, damit sie am pivot point bleibt (Abb. c). Die vollständige Transformationsmatrix, die translation und scaling kombiniert, lautet:

matrix(sx,0,0,sy,cx·(1-sx),cy·(1-sy))

Diese Matrix skaliert das Objekt korrekt um den pivot point (cx, cy), ohne eine unerwünschte Verschiebung. Die Koeffizienten cx·(1-sx) und cy·(1-sy) übernehmen die notwendige translation, damit das Objekt nach dem Scaling an seiner ursprünglichen Position bleibt. Berechnen wir diese Werte für das rote Rechteck (Abb. c). Der pivot point (cx, cy) ist in diesem Beispiel (10, 10), also die obere linke Ecke des blauen Anfangsrechtecks:

cx·(1-sx)=10·(1-1.5)=10·(-0.5)=-5
cy·(1-sy)=10·(1-1.5)=10·(-0.5)=-5

Rotation Matrix

Die rotation matrix verwendet Sinus und Cosinus des Rotationswinkels:

Rotation-matrix-Formel

matrix(cos(α),sin(α),-sin(α),cos(α),0,0), wobei α der Winkel um den Punkt mit den Koordinaten (0, 0) des ursprünglichen Koordinatensystems ist.

Betrachten Sie das Beispiel mit dem ursprünglichen blauen Rechteck, das um 90° (grün), 180° (grau), 270° (teal), -45° (rot) und 135° (orange) gedreht wird:

 1<svg viewBox="-50 -50 200 200" xmlns="http://www.w3.org/2000/svg">
 2	<!-- rotation around point with coordinates (0, 0) is shown in fig.a -->
 3    <g>
 4	  <rect x="0" y="0" width="20" height="20" fill="blue" />
 5	  <rect x="0" y="0" width="20" height="20" fill="green" transform="matrix(0,1,-1,0,0,0)" />
 6	  <rect x="0" y="0" width="20" height="20" fill="grey" transform="matrix(-1,0,0,-1,0,0)" />
 7	  <rect x="0" y="0" width="20" height="20" fill="teal" transform="matrix(0,-1,1,0,0,0)" />
 8	  <rect x="0" y="0" width="20" height="20" fill="red" transform="matrix(0.7071,-0.7071,0.7071,0.7071,0,0)" />
 9	  <rect x="0" y="0" width="20" height="20" fill="orange" transform="matrix(-0.7071,0.7071,-0.7071,-0.7071,0,0)" />
10	<!-- rotation around point with coordinates (0, 0) is shown in fig.b -->
11    </g>
12	<g transform="translate(70)">
13	  <rect x="5" y="5" width="20" height="20" fill="blue" />
14	  <rect x="5" y="5" width="20" height="20" fill="green" transform="matrix(0,1,-1,0,0,0)" />
15	  <rect x="5" y="5" width="20" height="20" fill="grey" transform="matrix(-1,0,0,-1,0,0)" />
16	  <rect x="5" y="5" width="20" height="20" fill="teal" transform="matrix(0,-1,1,0,0,0)" />
17	  <rect x="5" y="5" width="20" height="20" fill="red" transform="matrix(0.7071,-0.7071,0.7071,0.7071,0,0)" />
18	  <rect x="5" y="5" width="20" height="20" fill="orange" transform="matrix(-0.7071,0.7071,-0.7071,-0.7071,0,0)" />
19	</g>
20    <!-- rotation around point with coordinates (5, 5) is shown in fig.c -->
21	<g transform="translate(140)">
22	  <rect x="5" y="5" width="20" height="20" fill="blue" />
23	  <rect x="5" y="5" width="20" height="20" fill="green" transform="matrix(0,1,-1,0,10,0)" />
24	  <rect x="5" y="5" width="20" height="20" fill="grey" transform="matrix(-1,0,0,-1,10,10)" />
25	  <rect x="5" y="5" width="20" height="20" fill="teal" transform="matrix(0,-1,1,0,0,10)" />
26	  <rect x="5" y="5" width="20" height="20" fill="red" transform="matrix(0.7071,-0.7071,0.7071,0.7071,-2,5)" />
27	  <rect x="5" y="5" width="20" height="20" fill="orange" transform="matrix(-0.7071,0.7071,-0.7071,-0.7071,12,5)" />
28	</g>
29</svg>

Hinweis: Ein positiver Winkel dreht im Uhrzeigersinn, ein negativer Winkel gegen den Uhrzeigersinn.

Das Ergebnis der SVG-Rotation sehen Sie in der Abbildung:

Sechs Rechtecke als Illustration einer Rotation-Transformation

Abb. a zeigt den Fall, in dem die obere linke Ecke des blauen Rechtecks (0, 0) mit dem Ursprung des Koordinatensystems (0, 0) übereinstimmt.
Abb. b zeigt den Fall, in dem das blaue Rechteck bei (5, 5) beginnt, also nicht am Ursprung liegt. Die globalen x-y-Achsen gelten für alle drei Abbildungen, und die roten x’-y’-Achsen zeigen das Koordinatensystem nach einer 45-Grad-Drehung gegen den Uhrzeigersinn (α=-45°).
Abb. c zeigt rotation um den Rechteckpunkt (5, 5), sodass der pivot dem Rechteck folgt statt dem globalen Ursprung.

Hinweis: Die folgende Matrix dreht das Objekt um den pivot point (cx, cy):

matrix(cos(α), sin(α), -sin(α), cos(α), cx·(1-cos(α))+cy·sin(α), cy·(1-cos(α))-cx·sin(α))

Die Koeffizienten cx·(1-cos(α))+cy·sin(α) und cy·(1-cos(α))-cx·sin(α) liefern die translation, die für rotation um den pivot point nötig ist. Berechnen wir diese Werte für das rote Rechteck (Abb. c). Der pivot point (cx, cy) ist in diesem Beispiel (5, 5), also die obere linke Ecke des blauen Anfangsrechtecks, und der Winkel für das rote Rechteck ist -45°:

cos(-45°)=0.7071, sin(-45°)=-0.7071

cx·(1-cos(α))+cy·sin(α)=5·(1-0.7071)+5·(-0.7071)=-2
cy·(1-cos(α))-cx·sin(α)=5·(1-0.7071)-5·(-0.7071)=5

Skewing Matrix

Skewing ist eine Transformation, die eine Achse des Koordinatensystems des Elements um einen bestimmten Winkel α im oder gegen den Uhrzeigersinn neigt. SVG-Elemente können mit skewing matrices geneigt werden:

Skew-matrix-Formel für Transformation entlang der x-Achse

matrix(1,0,tan(α),1,0,0) – Diese skew matrix beschreibt eine skew-Transformation entlang der x-Achse um α Grad.

Skew-matrix-Formel für Transformation entlang der y-Achse

matrix(1,tan(α),0,1,0,0) – Diese skew matrix beschreibt eine skew-Transformation entlang der y-Achse um α Grad.

Hier ist ein Beispiel für einen Kreis mit skew transformations:

 1<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 2	<g fill="none">
 3		<circle cx="20" cy="20" r="10" stroke="blue" />
 4		<!-- skew transformation along the x-axis by α=45° -->
 5		<circle cx="20" cy="20" r="10" stroke="red" transform="matrix(1,0,1,1,0,0)" />
 6	</g>
 7	<g fill="none" transform="translate(70)">
 8		<circle cx="20" cy="20" r="10" stroke="blue" />
 9		<!-- skew transformation along the y-axis by α=45° -->
10		<circle cx="20" cy="20" r="10" stroke="orange" transform="matrix(1,1,0,1,0,0)" />
11	</g>
12</svg>

Das gerenderte Beispiel sieht so aus:

Ursprünglicher Kreis und Kreis nach Anwendung der skew-Transformation

Hinweis: Der Winkel α steht für eine skew-Transformation in Grad. Bei der x-axis skew matrix ändern sich x-Koordinaten, während y-Koordinaten unverändert bleiben. Bei der y-axis skew matrix ändern sich y-Koordinaten, während x-Koordinaten unverändert bleiben.

Häufige Fehler und Korrekturen

Problem	Ursache	Lösung
Transformation funktioniert, aber das Objekt bewegt sich unerwartet	Transformationen werden relativ zum Ursprung `(0,0)` angewendet	Verschieben Sie das Objekt vor scaling oder rotation zum gewünschten pivot point
Rotation erfolgt um den falschen Punkt	Rotation matrix wird ohne ausgleichende translation angewendet	Kombinieren Sie translation → rotation → reverse translation in einer Matrix
Scaling verzerrt die Position	Scaling wird ohne Anpassung der translation-Werte angewendet	Passen Sie `e` und `f` an oder skalieren Sie um einen bestimmten Punkt
Matrix erzeugt keinen sichtbaren Effekt	Matrixwerte sind falsch oder entsprechen der Identitätsmatrix	Prüfen Sie, ob die Matrixwerte von `1 0 0 1 0 0` abweichen
Mehrere transforms überschreiben einander	Matrix ersetzt vorherige `transform`-Operationen	Kombinieren Sie Transformationen in einer Matrix oder wenden Sie sie in richtiger Reihenfolge an
Unerwartetes skewing	Falsche `b`- oder `c`-Werte	Stellen Sie sicher, dass skew-Werte gewollt sind und dem gewünschten Winkel entsprechen
Transformationen sind schwer zu debuggen	Matrixwerte sind schwer zu interpretieren	Beginnen Sie mit einfachen Transformationen wie translate und scale und bauen Sie schrittweise auf

Schnelle Rezepte

Transformation Matrix Cheat Sheet

Ziel	Matrix	Hinweise
Keine Transformation, identity	`matrix(1 0 0 1 0 0)`	Setzt alle Transformationen zurück
Um (tx, ty) verschieben	`matrix(1 0 0 1 tx ty)`	Verschiebt das Objekt ohne scaling oder rotation
Gleichmäßig um s skalieren	`matrix(s 0 0 s 0 0)`	Skaliert relativ zum Ursprung
Um (sx, sy) skalieren	`matrix(sx 0 0 sy 0 0)`	Ungleichmäßiges scaling
Um Punkt (cx, cy) skalieren	`matrix(s 0 0 s cx(1-s) cy(1-s))`	Hält den Mittelpunkt fest
Um θ drehen, um Ursprung	`matrix(cosθ sinθ -sinθ cosθ 0 0)`	θ ist in Radiant
Um Punkt (cx, cy) drehen	`matrix(cosθ sinθ -sinθ cosθ cx-cxcosθ+cysinθ cy-cxsinθ-cycosθ)`	Häufigster Rotationsfall
Horizontal um θ neigen	`matrix(1 0 tanθ 1 0 0)`	Skew entlang der x-Achse
Vertikal um θ neigen	`matrix(1 tanθ 0 1 0 0)`	Skew entlang der y-Achse
Horizontal spiegeln	`matrix(-1 0 0 1 w 0)`	`w` ist die Objektbreite
Vertikal spiegeln	`matrix(1 0 0 -1 0 h)`	`h` ist die Objekthöhe
Scale + rotate kombinieren	`matrix(a b c d e f)`	Kombinierte Werte vorab berechnen

Die sechs Matrixwerte wirken zusammen als eine Transformation und werden im aktuellen SVG-Koordinatensystem interpretiert.

Praktische SVG-Beispiele

Objekt um (tx, ty) verschieben

1<rect x="50" y="50" width="100" height="60" transform="matrix(1 0 0 1 40 30)" />

Objekt 2× skalieren, gleichmäßig

1<rect x="50" y="50" width="80" height="40" transform="matrix(2 0 0 2 0 0)" />

Objekt um sein Zentrum (cx, cy) skalieren

1<rect x="50" y="50" width="100" height="60" transform="matrix(2 0 0 2 -100 -80)" />

Die translation gleicht das Scaling um den Mittelpunkt aus.

Objekt um 45° um den Ursprung drehen

1<rect x="50" y="50" width="100" height="60" transform="matrix(0.707 0.707 -0.707 0.707 0 0)" />

Um einen bestimmten Punkt (cx, cy) drehen

1<rect x="50" y="50" width="100" height="60" transform="matrix(0.707 0.707 -0.707 0.707 85 -35)" />

Horizontal skew anwenden

1<rect x="40" y="40" width="120" height="60" transform="matrix(1 0 0.5 1 0 0)" />

Translation, Scaling und Rotation kombinieren

1<rect x="30" y="30" width="100" height="60" transform="matrix(1.5 0.5 -0.5 1.5 40 20)" />

FAQ – SVG-Transformationsmatrix

Was bedeutet matrix(a,b,c,d,e,f) in SVG?

matrix(a,b,c,d,e,f) ist die SVG-transform-Funktion, die scaling, skewing, rotation und translation in sechs Werten speichert. Die Werte a, b, c und d beeinflussen scale, skew und rotation; e und f verschieben das Element.

Was ist die Identitätsmatrix in SVG?

Die Identitätsmatrix ist matrix(1 0 0 1 0 0). Sie lässt das Element unverändert und ist ein guter Ausgangspunkt, wenn eine Transformationsmatrix Schritt für Schritt aufgebaut wird.

Warum verschiebt eine Matrixtransformation mein Objekt unerwartet?

Matrixtransformationen werden relativ zum Ursprung des aktuellen Koordinatensystems angewendet. Wenn ein Objekt außerhalb von (0,0) skaliert oder gedreht wird, kann sich auch seine sichtbare Position ändern, sofern e und f den pivot point nicht ausgleichen.

Sollte ich matrix() oder getrennte transform functions verwenden?

Verwenden Sie getrennte Funktionen wie translate(), scale() und rotate(), wenn SVG-Markup lesbar bleiben soll. Verwenden Sie matrix(), wenn Werte berechnet, von einem Tool exportiert oder mehrere Transformationen in einer einzigen transform kombiniert werden müssen.

Spezifikation und verwandte Ressourcen

Der SVG-Spezifikationsabschnitt zu transformations definiert die matrix transform function und verwandte transform-Syntax.
Verwenden Sie SVG-Transformationen für lesbare Beispiele mit translate(), scale(), rotate(), skewX() und skewY().
Öffnen Sie SVG-Koordinatensysteme und Einheiten, um das Koordinatensystem hinter Matrixberechnungen zu verstehen.
Siehe SVG Transformations – C# Examples für .NET API-Beispiele, die transform functions und matrices verwenden.
Siehe SVG-Elemente in Python transformieren für Python via .NET-Beispiele, die SVG-transform-Attribute programmgesteuert aktualisieren.
Siehe Rotate SVG – C# Examples und SVG Scaling – C# Examples für fokussierte API-Workflows.

Grundlegende SVG-Transformationen Füllung und Kontur in SVG