SVG
Transformation

Syntax

• transform = " [Funktionen] * "
• übersetzen (x [, y])
• drehen (θ [, x, y])
• Skala (x [, y])
• skewX (θ)
• schief (θ)
• Matrix (a, b, c, d, e, f)

Transformationen anwenden

Transformationen können auf Elemente angewendet werden, indem ein transform hinzugefügt wird:

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

Oder zu Gruppen von Elementen, die in <g> -Tags eingeschlossen sind:

<g transform="translate(50,50)">
<circle cx="0" cy="0" r="50"/>
<circle cx="0" cy="0" r="25" fill="white"/>
</g>

Weitere Transformationen können auf dasselbe Element angewendet werden, indem sie durch Leerzeichen getrennt hinzugefügt werden:

<circle cx="0" cy="0" r="50" transform="translate(50,50) scale(.5)"/>

Transformationsfunktionen

Übersetzen

translate verschiebt Grafiken entlang spezifizierter Vektoren:

<circle cx="0" cy="0" r="50" transform="translate(50,50)"/>

Der erste Wert ist die x-Translation und der zweite das y. Wenn das y weggelassen wird, ist der Standardwert 0.

Rahmen

scale Größe von Elementen um bestimmte Verhältnisse:

<circle cx="50" cy="50" r="25" transform="scale(.5,2)"/>

Wie bei translate sind die Argumente x und dann y. Wenn jedoch in y die scale weggelassen wird, wird standardmäßig der Wert von x verwendet. mit anderen Worten, es skaliert das Element, ohne das Seitenverhältnis zu ändern.

Drehen

rotate dreht Elemente um angegebene Winkel.

<!-- <rect> used for this example because circles can't be rotated -->
<rect width="100" height="5" transform="rotate(90,50,50)"/>

Der erste Wert ist der Winkel in Grad. Die Transformation wird im Uhrzeigersinn angewendet. Die anderen beiden Werte repräsentieren den Punkt, um den der Punkt gedreht werden soll. Der Standardwert ist der Ursprung.