SVG transform: translate, scale, rotate

SVG scale: SVG Elemente skalieren

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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

transform translate

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.

<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).

rotate SVG Element performed around the origin of the viewbox
SVG-Elemente werden nicht um ihren Mittelpunkt transformiert, sondern um den Ursprung des SVG-Koordinatensystems.

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)" /> 
SVG scale element
SVG-Element scale – verkleinern und vergrößern
<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 erst einmal nicht sooo 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.

transform rotate
<path transform="rotate(r, x, y)" d=" … " >

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

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

svg scale spiegeln
<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.

SVG transform skew

skew(sx° sy°) verzerrt ein Element entlang der x / y-Achse, z.B., um eine andere Perspektive zu bieten oder einen Schatten zu simulieren. Analog wie eine Rotation ist der Ausgangspunkt der Verzerrung der Nullpunkt der ViewBox.

Verzerren zum Schatten

Der Schatten der Giesskanne entsteht durch skewX, wird durch scale entlang der y-Achse verkürzt und mit transform unter das Element geschoben.

<use xlink:href="#gieskanne" fill="gray" transform="scale(1 0.5) skewX(50)  translate(-450 191)"/>

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)" />
[ 1 0 x 0 1 y 0 0 1 ]

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) 0 sin(a) cos(a) 0 0 0 1 ]

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).

[ x 0 0 0 y 0 001]

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 Werte.

[acebdf001]

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

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

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