SVG
Transformación

Sintaxis

• transform = " [funciones] * "
• traducir (x [, y])
• rotar (θ [, x, y])
• escala (x [, y])
• skewX (θ)
• skewY (θ)
• matriz (a, b, c, d, e, f)

Aplicando Transformaciones

Las transformaciones se pueden aplicar a los elementos agregando un atributo de transform :

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

O a grupos de elementos incluidos en las etiquetas <g> :

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

Se pueden aplicar más transformaciones al mismo elemento al agregarlas separadas por espacios:

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

Funciones de transformacion

Traducir

translate mueve gráficos a lo largo de vectores especificados:

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

El primer valor es la traducción x, y el segundo la y. Si se omite la y, se establecerá de forma predeterminada en 0.

Escala

scale cambia el tamaño de los elementos por razones específicas:

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

Al igual que translate , los argumentos son x, luego y. Sin embargo, en la scale , si se omite la y, se establecerá por defecto el valor de x; en otras palabras, escala el elemento sin cambiar la relación de aspecto.

Girar

rotate gira los elementos según los ángulos especificados.

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

El primer valor es el ángulo, en grados. La transformación se aplica en sentido horario. Los otros dos valores representan el punto a rotar, por defecto al origen.