Trasformazione SVG

SVG 转换在SVG图像中创建的形状。例如，移动，缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。

转换示例

这是一个简单的示例：

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

Effetto immagine dopo l'esecuzione:

注意<rect>元素的trasformazione e <text>的trasformazione属性。该属性指定要应用于形状的变换。在此示例中，应用了平移和旋转。两者都将在本文后面解释。

哪些元素可以转换？

您可以将变换应用于所有SVG形状。您还可以将变换应用于<g> 　 　元素，从而一次性有效地变换整个元素组。也可以变换渐变和填充图案。

转换函数

SVG提供四种转换函数：

• translate()

• rotate()

• scale()

• skew()

• matrix()

以下各节将对这些函数中的每一个进行更详细的说明。

实际上，转换函数不会自行转换SVG形状，而是会转换该形状的基础坐标系。因此，即使宽度以倍数显示，宽度20乘以2的形状在逻辑上仍具有20的宽度。

移动

translate()函数移动形状。您将x e y　 值传递给translate()的函数。这是一个示例：

translate(50,25)

Questo esempio sposta la forma di 50 unità lungo l'asse x e di 25 unità lungo l'asse y.

Questo è un esempio che mostra due forme di posizione e dimensione uguali, con e senza traslazione:

<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)"
</svg>

Effetto immagine dopo l'esecuzione:

Nota che, rispetto alla prima (rossa) forma, la seconda (blu) forma si sposta di 75 unità lungo l'asse x e di 25 unità lungo l'asse y.

Ruota

rotate()La funzione ruota le forme attorno al punto 0,0. Questo è un esempio che mostra un rettangolo (contorno) e un rettangolo uguale (pieno) ruotato di 15 gradi:

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

Effetto immagine dopo l'esecuzione:

Se si desidera ruotare attorno a un punto diverso da 0,0, passare le coordinate x e y di quel punto atrasformazioneLa funzione. Questo è un esempio che mostra un rettangolo (contorno) non ruotato e un rettangolo uguale (pieno) ruotato di 15 gradi attorno al suo centro:

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

Effetto immagine dopo l'esecuzione:

Tutte le rotazioni sono rotazioni in senso orario, con un angolo che va da 0 a 360. Se si desidera ruotare in senso antiorario, passare un angolo negativo arotate()La funzione.

Scala

scale()La funzione può ampliare o ridurre le forme in proporzione.scale()La funzione può scalare la dimensione della forma e le coordinate della posizione. Pertanto, un rettangolo di 20x20 scalato di 2 volte ha una larghezza di 40 e un'altezza di 60, situato in 20,20.

scale()La funzione può anche scalare la larghezza dei tratti della forma.

Questo è un esempio che mostra un rettangolo (blu) situato in 10,0 con una larghezza di 20 e una altezza di 20, e un rettangolo proporzionale (nero) con una scala di 2:

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

Effetto immagine dopo l'esecuzione:

Nota come la posizione e la dimensione del rettangolo sono scalate.

Puoi scalare le forme lungo l'asse x e l'asse y con altri fattori. Per farlo, puoi aggiungere ascale()La funzione fornisce i parametri x-scale e y-scale, come mostrato di seguito:

scale(2,3);

Questo esempio scala le forme di 2 volte lungo l'asse x e di 3 volte lungo l'asse y. Ecco un esempio:

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

Effetto immagine dopo l'esecuzione:

Si prega di notare come la larghezza dei tratti del rettangolo (nero) è scalata, e come le proporzioni di scala su assi x e y sono diverse.

缩放为镜像函数

scale()通过沿x轴或y轴按-1缩放比例， 　 　可以将该函数用作镜像函数。完成后，您必须先在x或y方向上移动（平移）该形状，否则镜像的形状将出现在SVG画布的外部。

这是一个示例：

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

这是在x = 100处绘制的线条的结果图像（因为矩形在x方向上平移了100）。

蓝色是原始形状。黑色形状是平移的缩放比例形状。

偏斜

skewX()eskewY()函数偏斜x轴和y轴。实际上，这些函数会根据以度为单位指定的某个角度来倾斜给定的轴。

以下是显示具有不同skewX()值的矩形的一些示例。

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

Effetto immagine dopo l'esecuzione:

正如您看到的，skewX()函数使垂直线看起来像是按给定角度旋转了。因此，skewY()函数使水平线看起来像是旋转了给定角度。这里有一些示例：

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

矩阵

也可以将转换表示为矩阵。矩阵如下所示：

a				e
b				f
0　　0　　1

由于只能指定前6个值，因此只能为矩阵转换函数提供6个值。这是一个示例：

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

其他变换函数可以表示为矩阵。这里有一些示例：

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

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

Nota: Questo valorecos(a)esin(a)Ha il parametro calcolato preventivamente prima dell'inserimento del matrice. Questo parametroaè l'angolo di rotazione.

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

La trasformazione di skew lungo l'asse x può essere scritta come:

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

tan(a)Il valore deve essere inseritomatrix()Le funzioni devono essere calcolate preventivamente prima di essere applicate.

La trasformazione di skew lungo l'asse y può essere rappresentata come:

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

Questo è un esempio di trasformazione matriciale SVG che imita una funzione di trasformazione semplice:

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

Effetto immagine dopo l'esecuzione:

Nota come il rettangolo di destra (blu) si trasforma rispetto al rettangolo di sinistra (rosso).

Combina le trasformazioni

Le trasformazioni possono essere combinate. Puoi farlotrasformazionePiù funzioni di trasformazione possono essere messe insieme all'interno dell'attributo.

Questo è un esempio di rettangolo che viene prima spostato (messo in movimento) e poi ruotato. L'esempio mostra il rettangolo (nero) prima e dopo l'applicazione di qualsiasi trasformazione (blu).

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

Effetto immagine dopo l'esecuzione:

L'ordine delle trasformazioni è molto importante

L'ordine delle trasformazioni è molto importante. IntrasformazioneL'ordine di specifica delle funzioni di trasformazione all'interno dell'attributo è l'ordine in cui vengono applicate alla forma.

Esempio seguente spiega la differenza tra spostamento e rotazione in sequenza, e rotazione e spostamento in sequenza:

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

Effetto immagine dopo l'esecuzione:

Il rettangolo nero non ha applicato alcuna trasformazione. Prima sposta il rettangolo blu, poi ruota. Prima ruota il rettangolo rosso, poi sposta.