SVG Transformation

SVG transformations create shapes in SVG images. For example, moving, scaling, and rotating shapes. This is a convenient method for displaying vertical or diagonal text.

Transformation example

This is a simple example:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="50"　y="50"　height="110"　width="110"
　　　　　　　　　　style="stroke:#ff0000;　fill:　#ccccff"　transform="translate(30)　rotate(45　50　50)"
　　　　　　　　　　　　>
　　　　</rect>
　　　　<text　x="70"　y="100"　transform="translate(30)　rotate(45　50　50)"
　　　　>oldtoolbag.com</text>
</svg>

Bildeffekt nach dem Ausführen:

Note<rect>element'stransform und <text>oftransformattribute. This attribute specifies the transformation to be applied to the shape. In this example, translation and rotation are applied. Both will be explained later in this article.

Which elements can be transformed?

You can apply transformations to all SVG shapes. You can also apply transformations to<g> 　 　elements, thus transforming the entire element group effectively in one go. Gradients and fill patterns can also be transformed.

Transformation functions

SVG provides four transformation functions:

• translate()

• Alle Drehungen sind im Uhrzeigersinn und die Gradzahl reicht von

• scale()

• skew()

• matrix()

The following sections will provide a more detailed explanation of each of these functions.

In fact, the transformation function does not transform the SVG shape itself, but rather the base coordinate system of the shape. Therefore, even if the width is displayed in multiples, the width2Funktion skaliert die Form proportional auf oder ab.2The shape still logically has20 width.

move

translate()function to move the shape. You willx und y　 value totranslate()function. This is an example:

translate(50,25)

This example moves the shape along the x-axis50 units and move along the y-axis25units.

This is an example showing two shapes with equal positions and sizes, with and without translation:

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#cc3333"/>
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#3333cc"　transform="translate(75,25)"></rect>
</svg>

Bildeffekt nach dem Ausführen:

Please note that, compared to the first (red) shape, the second (blue) shape moves along the x-axis75units, moving along the y-axis25units.

Rotation

Alle Drehungen sind im Uhrzeigersinn und die Gradzahl reicht vonThe function rotates the shape around the point 0,0. This is an example showing a rectangle (outline) and the rotated15The equal rectangle after rotation (solid):

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="stroke:　#3333cc;　fill:none;"
　　　　　　　　></rect>
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15)"
　　　　　　　　></rect>
　　　　</svg>

Bildeffekt nach dem Ausführen:

If you want to rotate around points other than 0,0, then pass the x and y coordinates of the point totransform函数。这是一个示例，显示了一个非旋转的矩形（轮廓）和一个相等的矩形（实心）围绕其中心旋转15度：

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="stroke:　#3333cc;　fill:none;"
　　　　　　　></rect>
<rect　x="20"　y="20"　width="40"　height="40"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="rotate(15,　40,　40)"
　　　　　　　></rect>
</svg>

Bildeffekt nach dem Ausführen:

Funktion. Dies ist ein Beispiel, das ein nicht gedrehtes Rechteck (Kontur) und ein gleiches Rechteck (voll) zeigt, das um seinen Mittelpunkt gedreht ist.36Grad:Alle Drehungen sind im Uhrzeigersinn und die Gradzahl reicht von0. Wenn Sie gegen den Uhrzeigersinn drehen möchten, geben Sie negative Grad an

rotate()

scale()Funktion.scale()Skalieren2Funktion skaliert die Form proportional auf oder ab.2Funktion kann die Größe und Position der Form skalieren. Daher, mit2,0) und einer Breite von30 mal20,20 ist, sich im Verhältnis der Skalierung der Breite von4,0) und einer Breite von60 ist und eine Breite von

scale()0 ist und eine Breite von

Funktion kann die Linienbreite der Form skalieren.10Dies ist ein Beispiel, das ein Rechteck zeigt, das an Position2,0) und einer Breite von2Ein Rechteck mit einer Breite von 0 und einer Höhe von2:

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc; fill:none;"></rect>
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke: #000000; fill:none;" transform="scale(2)"></rect>
</svg>

Bildeffekt nach dem Ausführen:

Beachten Sie die Position und Größe des Rechtecks, wie es skaliert wird.

Sie können die Form entlang der x- und y-Achse mit anderen Faktoren skalieren. Dafür können Sie inscale()Funktion bietet x-scale und y-Die scale-Parameter, wie folgt:

scale(2,3);

Dieses Beispiel skaliert die Form entlang der x-Achse2Mal, entlang der y-Achse die Form skalieren3Mal. Dies ist ein Beispiel:

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc; fill:none;"></rect>
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke: #000000; fill:none;" transform="scale(2,3)"></rect>
</svg>

Bildeffekt nach dem Ausführen:

Bitte beachten Sie, dass die Linienbreite des nachgezeichneten Rechtecks (schwarz) ebenfalls skaliert wird und die Skalierungsfaktoren auf der x- und y-Achse unterschiedlich sind.

Skalieren zur Spiegelfunktion

scale()Durch Skalieren entlang der x- oder y-Achse mit-1Skalierungsfaktor, 　 　Diese Funktion kann als Spiegelfunktion verwendet werden. Nachdem Sie die Form abgeschlossen haben, müssen Sie sie zunächst in der x- oder y-Richtung verschieben (verschieben), andernfalls erscheint die gespiegelte Form außerhalb des SVG-Bildschirms.

Dies ist ein Beispiel:

<svg　width="500"　height="150">
<path d="M20,20 l20,20 l0,20 l-20,20 Z"
　　　　　　style="stroke:　#3333cc;　fill:none;"　/>
<path d="M20,20 l20,20 l0,20 l-20,20 Z"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(100, 0) scale(-1,　1) "　/></svg>

Dies ist an x = 10Das Ergebnis der Zeichnung einer Linie an Position 0（weil das Rechteck im x-Bereich verschoben wurde100）。

Blau ist die ursprüngliche Form. Die schwarze Form ist die verschobene Skalierung der Form.

Verzerren

skewX()undskewY()Funktionen, die die x- und y-Achsen verzerren. Tatsächlich verzerren diese Funktionen die angegebenen Achsen um einen bestimmten Winkel in Grad.

Hier sind einige Beispiele zur Anzeige von Rechtecken mit verschiedenenskewX()Einige Beispiele für Rechtecke mit Werten.

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;"　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(10)"　/>
<rect　x="100"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(45)"　/>
<rect　x="150"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewX(60)"　/></svg>

Bildeffekt nach dem Ausführen:

Wie Sie sehen können,skewX()Die Funktion macht die Vertikallinie so aus, als ob sie um einen gegebenen Winkel gedreht wäre. Daher,skewY()Die Funktion macht die Horizontallinie so aus, als ob sie um einen gegebenen Winkel gedreht wäre. Hier sind einige Beispiele:

<svg　width="500"　height="150">
<rect　x="10"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;"　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(60)"　/>
<rect　x="100"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(45)"　/>
<rect　x="150"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="skewY(10)"　/></svg>

Matrizen

als Matrix dargestellt werden können. Matrizen wie folgt:

a　　c　　e
b　　d　　f
0　　0　　1

Da nur6Werte, daher können nur Matrix-Transformationen bereitgestellt werden6Werte. Dies ist ein Beispiel:

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

Andere Transformationen können ebenfalls als Matrizen dargestellt werden. Hier einige Beispiele:

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

Rotate
cos(a)　　　-sin(a)　　0
sin(a)　　　　cos(a)　　0
　　　　　0　　　　　　　　0　　　1
matrix(　cos(a),　sin(a),-sin(a),cos(a),0,0　)

Anmerkung: Dieser Wertcos(a)undsin(a)muss vor der Einfügung des Basismatrix vorgeschaltet werden. Dieser Parameteraist der Drehwinkel.

Scale
sx　　0　　0
　0　sy　　0
　0　　0　　1
matrix(sx,0,0,sy,0,0)

Die Verschiebung entlang der x-Achse kann folgendermaßen geschrieben werden:

Skew
1　　tan(a)　　0
0　　　　　　　1　　0
0　　　　　　　0　　1
matrix(1,0,tan(a),1,0,0)

tan(a)Werte inmatrix()Die Funktion muss vor der Berechnung vorgeschaltet werden.

Die Verschiebung entlang der y-Achse kann dargestellt werden als:

Skew
1　　　　　　　0　　0
tan(a)　　1　　0
0　　　　　　　0　　1
matrix(1,tan(a),0,1,0,0)

Dies ist ein Beispiel für eine SVG-Matrix-Transformation, die eine einfache Transformation nachahmt:

<svg　width="500"　height="150">
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#cc3333"/>
<rect　x="20"　y="20"　width="50"　height="50"
　　　　　　style="fill:　#3333cc"
　　　　　　transform="matrix(1,0,0,1,100,20)"
　　　　　　　　/>
</svg>

Bildeffekt nach dem Ausführen:

Beachten Sie, wie sich das rechte Rechteck (blau) im Vergleich zum linken Rechteck (rot) verändert.

Transformationen kombinieren

Transformationen kombinieren. Sie können dies tun, indem Sie intransformMehrere Transformationen können durch Platzierung mehrerer Transformationen innerhalb der Eigenschaft implementiert werden.

Dies ist ein Beispiel, bei dem eine Kombination von Verschieben und Drehen von Rechtecken angewendet wird. Das Beispiel zeigt das Rechteck vor und nach der Anwendung jeder Transformation (schwarz) und nach der Anwendung jeder Transformation (blau).

<svg　width="500"　height="150">
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　fill:none;"
　　　　　　　　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　fill:none;"
　　　　　　transform="translate(50,0)　rotate(30)"　/>
</svg>

Bildeffekt nach dem Ausführen:

Die Reihenfolge der Transformation ist wichtig

Die Reihenfolge der Transformation ist wichtig. IntransformDie Reihenfolge der Transformationsfunktionen innerhalb der Eigenschaft ist die Reihenfolge, in der sie auf die Form angewendet werden.

Nachfolgender Beispiel zeigt die Unterschiede zwischen erst Verschieben und dann Drehen, sowie zuerst Drehen und dann Verschieben von Formen:

<svg　width="500"　height="150">
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#000000;　stroke-width:　2px;　fill:none;"
　　　　　　　　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#3333cc;　stroke-width:　2px;　　fill:none;"
　　　　　　transform="translate(100,0)　rotate(45)"　/>
<rect　x="50"　y="10"　width="20"　height="30"
　　　　　　style="stroke:　#cc3333;　stroke-width:　2px;　　fill:none;"
　　　　　　transform="rotate(45)　translate(100,0)"　/>
</svg>

Bildeffekt nach dem Ausführen:

Schwarzes Rechteck wird keine Transformation angewendet. Zuerst verschieben Sie das blaue Rechteck, dann drehen Sie es. Zuerst drehen Sie das rote Rechteck, dann verschieben Sie es.