transform translate – Verschieben, versetzen
transform funktioniert 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 Werten zwischen 0 und 1) bzw. Vergrößern (mit Werten > 0) auf der xy-Achse.
Die 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 – Dreh- und Angelpunkt der SVG-Grafik
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).
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)" />
<use xlink:href="#schere-scale" transform="scale (0.6)"/>
Schuld ist der Nullpunkt, in diesem einfachen Beispiel der Nullpunkt der ViewBox.
Nullpunkt von SVG-Elementen ändern
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.
<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-Elemente 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 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.
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)" />
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.
Eine Rotation rotate(a, cx, cy) ist die Kombination aus translate(-cx, cy), rotate(a) und Translation zurück zu translate(cx, cy)
Scale mit scale(x y) ist äquivalent zu matrix(x 0 0 y 0 0).
Neigen oder Verzerren mit skewX (a) ist äquivalent zu matrix(1 0 tan(a) 1 0 0).
Neigen oder Verzerren mit skewY (a) ist äquivalent zu matrix(1 tan(a) 0 1 0 0).
Der matrix-Parameter braucht nur die ersten 6 Werte.
Quelle:SVG 1.1 (Second Edition) – 16 August 2011
Die einfachen Transformationen mit translate, rotate, … sind besser lesbar und einfacher zu ändern.
