Transformaciones en SVG

Las transformaciones SVG crean formas en las imágenes SVG. Por ejemplo, mover, escalar y rotar formas. Esto es un método conveniente para mostrar texto vertical o diagonal.

Ejemplo de transformación

Este es un ejemplo simple:

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

Efecto de la imagen después de ejecutar:

Nota<rect>elementotransform y <text>detransformpropiedad. Esta propiedad especifica la transformación que se debe aplicar a la forma. En este ejemplo, se aplican traslación y rotación. Ambos se explicarán más adelante en este documento.

¿Qué elementos se pueden transformar?

Puede aplicar transformaciones a todas las formas SVG. También puede aplicar transformaciones a<g> 　 　aplicar transformaciones a un grupo completo de elementos SVG de una vez. También se pueden transformar gradientes y patrones de relleno.

funciones de transformación

SVG proporciona cuatro funciones de transformación:

• translate()

• rotate()

• scale()

• skew()

• matrix()

A continuación, se explicarán detalladamente cada una de estas funciones.

En realidad, las funciones de transformación no transforman directamente las formas SVG, sino que transforman el sistema de coordenadas base de la forma. Por lo tanto, incluso si el ancho se muestra en múltiplos, el ancho20 multiplicado por2La forma sigue siendo lógicamente20 de anchura.

mover

translate()La función mueve la forma. Usted también puedex y y　 pasar valores atranslate()la función.

translate(50,25)

Este ejemplo mueve la forma a lo largo del eje x5unidades, y se mueve a lo largo del eje y25unidades.

Este es un ejemplo que muestra dos formas ubicadas y de tamaño iguales, con y sin traslación:

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

Efecto de la imagen después de ejecutar:

Observe que, en comparación con la primera (roja) forma, la segunda (azul) forma se mueve a lo largo del eje x75unidades, moviéndose a lo largo del eje y25unidades.

rotación

rotate()La función rota la forma alrededor del punto 0,0. Este es un ejemplo que muestra un rectángulo (contorno) y la rotación15rectángulo equivalente después de la rotación en grados (sólido):

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

Efecto de la imagen después de ejecutar:

Si se desea rotar alrededor de cualquier punto diferente de 0,0, se deben pasar las coordenadas x e y de ese punto atransformLa función. Este es un ejemplo que muestra un rectángulo no girado (contorno) y un rectángulo igual (sólido) girado alrededor de su centro.15grados:

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

Efecto de la imagen después de ejecutar:

Todas las rotaciones son en sentido horario, con ángulos desde 0 hasta360. Si desea girar en sentido horario, envíe ángulos negativos arotate()La función.

Escala

scale()La función amplía o reduce la forma en proporción.scale()La función puede escalar el tamaño de la forma y sus coordenadas de posición. Por lo tanto, con20 multiplicado por2con un ancho escalado proporcional de20 y la altura de3Un rectángulo de 0 ubicado en20,20 en40 y la altura de60。

scale()La función también puede escalar el ancho de la línea de la forma.

Este es un ejemplo que muestra un rectángulo ubicado10,0 en20 y la altura de2Un rectángulo de 0 (azul), y un rectángulo proporcional (negro) con una proporción de escala2:

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

Efecto de la imagen después de ejecutar:

Tenga en cuenta cómo se escala la posición y el tamaño del rectángulo.

Puede escalar la forma en el eje x e y con otros factores. Para hacer esto, puede agregarscale()La función proporciona x-escala y y-Parámetros de escala, como se muestra a continuación:

scale(2,3);

Este ejemplo escala la forma a lo largo del eje x2veces, al escalar la forma a lo largo del eje y3veces. Este es un ejemplo:

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

Efecto de la imagen después de ejecutar:

Tenga en cuenta cómo se escala el ancho de la línea del rectángulo escalado (negro) y cómo se escalan las proporciones en el eje x y y.

Para usar la función de escala como función de espejo

scale()Al escalar a lo largo del eje x o y-1factor de escala, 　 　Se puede usar esta función como función de espejo. Después de completar, debe mover la forma en la dirección x o y (desplazamiento) primero, de lo contrario, la forma del espejo aparecerá fuera del lienzo SVG.

Este es un ejemplo:

<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) escalar(-1,　1) "　/></svg>

Esto es en x = 10El resultado de la imagen de la línea dibujada en 0（porque el rectángulo se desplazó en la dirección x100）。

Azul es la forma original. La forma negra es la forma escalada del desplazamiento.

Desplazamiento

skewX()yskewY()La función desplaza el eje x e y. De hecho, estas funciones se inclinan el eje dado según un ángulo especificado en grados.

A continuación, se muestra con diferentesskewX()Algunos ejemplos de rectángulos con valores.

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

Efecto de la imagen después de ejecutar:

Como puede ver,skewX()La función hace que la línea vertical parezca que se ha girado un ángulo dado. Por lo tanto,skewY()La función hace que la línea horizontal parezca que se ha girado un ángulo dado. Aquí hay algunos ejemplos:

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

Matriz

También se puede representar la transformación como una matriz. La matriz se muestra a continuación:

a　　c　　e
b　　d　　f
0　　0　　1

debido a que solo se pueden especificar6valores, por lo que solo se pueden proporcionar6valores. Este es un ejemplo:

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

Otras funciones de transformación se pueden representar como matrices. Aquí hay algunos ejemplos:

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

Girar
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: Este valorcos(a)ysin(a)El parámetro debe calcularse previamente antes de insertar la matriz.aes el ángulo de rotación.

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

La transformación de desplazamiento en el eje x se puede escribir como:

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

tan(a)El valor enmatrix()La función debe calcularse previamente antes de insertar.

La transformación de desplazamiento en el eje y se puede representar como:

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

Este es un ejemplo de transformación de matriz SVG que imita una función de transformación simple:

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

Efecto de la imagen después de ejecutar:

Observe cómo la forma de la derecha (azul) se transforma en comparación con el rectángulo de la izquierda (rojo).

combinación de transformaciones

Se pueden combinar transformaciones. Puede hacerlo mediante la combinación detransformSe pueden colocar múltiples funciones de transformación dentro de las propiedades para lograrlo.

Este es un ejemplo que primero desplaza (mueve) y luego rota un rectángulo. Este ejemplo muestra el rectángulo (azul) antes y después de aplicar cualquier transformación (negro).

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

Efecto de la imagen después de ejecutar:

El orden de las transformaciones es importante

El orden de las transformaciones es importante. EntransformEl orden en que se especifican las funciones de transformación dentro de las propiedades es el orden en que se aplican a la forma.

A continuación se muestra un ejemplo que ilustra la diferencia entre primero desplazar y luego rotar, y primero rotar y luego desplazar la forma:

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

Efecto de la imagen después de ejecutar:

El rectángulo negro no aplica ninguna transformación. Primero transladar el rectángulo azul, luego girar. Primero girar el rectángulo rojo, luego transladar.