SVG transform: translate, scale, rotate

SVG Elemente vergrößern, verkleinern, rotieren, spiegeln, stecken und verzerren

transform ist das universelle Attribut für das Verschieben, Verkleinern und Vergrößern, Verzerren oder Neigen, Rotieren und Spiegeln von Elementen oder ganzen Gruppen von Elementen.

transform fuktioniert bei jedem Element, bei Gruppen und bei Verläufen und bewirkt entweder einzelne Manipulationen wie translate und / oder rotate oder manipuliert ein Element durch eine Matrix.

Der Wert von transform ist die gewünschte Transformation – z.B. translate(x y) mit einem oder zwei Werten, die horizontales und vertikales Verschieben bewirken: x entlang der X-Achse, y entlang der y-Achse.

transform translate

<path transform="translate(x y)" … >

Wenn translate nur entlang der x-Achse durchgeführt werden soll, reicht der x-Wert. Um auch die Position auf der y-Achse zu ändern, werden beide Werte x und y aufgeführt.

translate (x (y))
Verschieben entlang der x/y-Achse. x und y werden entweder durch Leerzeichen oder durch Komma getrennt.
rotate (a (x (y)))
Rotieren um einen Winkel a. Die optionalen Parameter x und y versetzen den Punkt, um den das Element rotiert wird.
scale (x (y))
Verkleinern (mit Werte < 0) bzw. Vergrößern (mit Werten > 0) auf der xy-Achse.
Werte (-1 1) bzw. (1 -1) spiegeln das Element an der x- bzw. y-Achse. Zwei Werte werden entweder durch Leerzeichen oder ein Komma getrennt.
skewX(x) skewY(y)
Verzerren oder Neigen entlang der xy-Achse

SVG Nullpunkt

Ohne weitere Angaben ist der Ausgangspunkt der Operation der Nullpunkt des aktuellen Koordinatensystems (die ViewBox-Ecke oben links, wenn das Element nicht bereits ein eigenes Koordinatensystem durch eine vorangegangene transform-Operation hat).

viewBox (0 0)

Bei einer Rotation von ~70° verschwindet der Scherenarm. Vergrößern und Verkleinern versetzt das Element in der x/y-Achse.

<use xlink:href="#schere" transform="rotate(72)" /> 
viewBox (0 0)
<use xlink:href="#schere-scale" transform="scale (0.6)"/>

Schuld ist der Nullpunkt, in diesem einfachen Beispiel der Nullpunkt der ViewBox.

Nullpunkt verschieben

Transform-Operationen gehen zunächst vom Nullpunkt des aktuellen Koordinatensystems des Elements aus – das ist bei Operationen wie rotate und scale nicht gerade intuitiv.

transform = rotate (a, x, y) hat zwei weitere optionale Parameter: x und y sind der Pivot- oder Dreh- und Angelpunkt und geben dem Element ein eigenes Koordinatensystem.

viewBox (0 0)

Die Kommas in transform = rotate(a, x, y) kann man ebensogut weglassen und transform = rotate(a x y) schreiben.

Ähnlich verlaufen die Transformationen auch beim HTML-Canvas, auch dort ist das Äquivalent zum ViewPort, der Context, nur der sichtbare Ausschnitt der Zeichenfläche und ebenfalls der viertel Quadrant. Nur wird beim HTML-Canvas bei Transformationen der gesamte Kontext transformiert und muss anschließen zurückgesetzt werden.

SVG Spiegeln mit scale und versetzen

Wenn Elemente mit scale(-1 1) oder scale(1 -1) an der x- bzw. y-Achse gespiegelt werden, verschwinden sie aus der ViewBox.

viewBox (0 0)
<svg height="100%" width="100%"  viewBox="0 0 1280 764">

// Spiegeln an der x-Achse und verschieben auf die alte Position
<use xlink:href="#schere-mirr" transform="scale(1 -1) translate(0 -730) "/>

// Spiegeln an der y-Achse und verschieben auf die alte Position
<use xlink:href="#schere-mirr" transform="scale(-1 1) translate(-1260 0) "/>

</svg>

Die zweite Transformation translate(x y) versetzt das Element wieder in die Viewbox.

Mehrere Transformationen kombinieren

Alle Operationen können als Liste im transform-Attribut sitzen und werden von rechts nach links ausgeführt. Wie bei CSS: Was zuletzt kommt, malt zuerst. Schließlich könnte man die Transformationen auch verschachtelt anwenden:

Der untere Scherenarm ist mit scale (1 -1) an der x-Achse gespiegelt und würde außerhalb des sichtbaren Ausschnitts der Viewbox liegen.

  • scale(1 -1) spiegelt den Scherenarm an der x-Achse
  • translate(0 764) verschiebt das Element / die Gruppe zurück in die ViewBox
  • rotate(-15 620 380) dreht den Arm um 15° um den Punkt x=620 y=380
                                                             1. Spiegeln ---+
                                         2. Verschieben ---+                |
                           3. Rotieren ---+                |                |
                                          |                |                |
<use xlink:href="#arm" transform="rotate(-15 620 380) translate(0 764)  scale(1 -1)" />
<g transform="scale(1 -1)">
   <g transform="translate(0,-764)">
   …
   </g>
</g>

Die transform-Matrix

Wenn Elemente rotiert und skaliert und verschoben werden, kann SVG die langatmige Liste der Operationen durch eine Matrix mit nur 6 Werten ersetzen. Alle Manipulationen können als 3 x 3-Matrix übergeben werden.

Verschieben mit translate(x y) ist äquivalent zu matrix(1 0 0 1 x y).

<rect x="50" y="50" height="100" width="100" transform="translate(200)" />
<rect x="50" y="50" height="100" width="100" transform="matrix(1 0 0 1 200 0)" />
[10x01y001]

Rotieren mit rotate(a) ist äquivalent zu matrix(cos(a) sin(a) -sin(a) cos(a) 0 0). Vor der Transformation müssen die Werte für sin(a) und cos(a) eingesetzt werden.

[cos(a)-sin(a)0sin(a)cos(a)0001]

Eine Rotation rotate(a, cx, cy) ist die Kombination aus translate(-cx, cy), rotate(a) und Translation zurück zu translate(cx, cy)

[ cos(a) -sin(a) -cx × cos(a) + cy × sin(a) + cx sin(a) cos(a) -cx × sin(a) - cy × cos(a) + cy 0 0 1 ]

Scale mit scale(x y) ist äquivalent zu matrix(x 0 0 y 0 0).

[x000y0001]

Neigen oder Verzerren mit skewX (a) ist äquivalent zu matrix(1 0 tan(a) 1 0 0).

[1tan(a)0010001]

Neigen oder Verzerren mit skewY (a) ist äquivalent zu matrix(1 tan(a) 0 1 0 0).

[100tan(a)10001]

Der matrix-Parameter braucht nur die ersten 6 Elemente.

[acebdf001]

Quelle:SVG 1.1 (Second Edition) – 16 August 2011

Die einfachen Transformationen mit translate, rotate, … sind besser lesbar und einfacher zu ändern.

TRANSFORM TRANSFORM scale(-1 1) scale(1 -1) viewBox TURN IT TURN IT