Buscar..


Observaciones

Los elementos gráficos se pueden alterar agregando un atributo de transformación .

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 10)" />
</svg>

En lugar de representar el origen superior izquierdo en las coordenadas (0, 0), se mostrará hacia abajo y hacia la derecha, desde el punto (10, 10).

Se pueden transformar grupos enteros de elementos, y las transformaciones pueden sumarse entre sí.

<svg xmlns="http://www.w3.org/2000/svg">
    <g transform="rotate(45)">
        <rect x="0" y="0" width="30" height="30" />
        <circle cx="5" cy="5" r="5" transform="scale(3)" />
    </g>
</svg>

Primero, cada punto del círculo se escalará con el factor 3 en relación con el origen, llevando el centro del círculo al centro del rectángulo en (15, 15) y su radio a 15. Luego, el rectángulo y la El círculo girará 45 grados en sentido horario alrededor del origen.

traducir

Mueve un rectángulo 10 unidades a la derecha y 20 unidades hacia abajo:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="30" height="30" transform="translate(10, 20)" />
</svg>

Muevalo 0 unidades horizontalmente y 20 unidades arriba:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="20" width="30" height="30" transform="translate(0, -20)" />
</svg>

Muévalo 10 unidades a la izquierda y 0 unidades verticalmente:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="0" width="30" height="30" transform="translate(-10)" />
</svg>

escala

Escala un rectángulo horizontalmente por el factor 2 y verticalmente por el factor 0.5:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="40" height="40" transform="scale(2, 0.5)" />
</svg>

El resultado es equivalente a

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="5" width="80" height="20" />
</svg>

Refleja un rectángulo horizontalmente:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="20" height="40" transform="scale(-1, 1)" />
</svg>

La escala opera en relación con el origen, por lo que es equivalente a

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="-20" y="0" width="20" height="40" />
</svg>

girar

Gire un polígono hacia la derecha 90 grados alrededor del origen:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 15,20" transform="rotate(90)" />
</svg>

El resultado es equivalente a

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 0,30 -20,15" />
</svg>

El centro de rotación se puede dar explícitamente:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 15,20" transform="rotate(90, 15, 15)" />
</svg>

El resultado es equivalente a

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="30,0 30,30 10,15" />
</svg>

skewX, skewY

sesgar un polígono horizontalmente en 45 grados:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>

El resultado es equivalente a

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 60,30 30,30" />
</svg>

Los valores de x se calculan como x + y * tan(angle) , y los valores de y se mantienen sin cambios

sesgar un polígono verticalmente en 30 grados:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>

El resultado es equivalente a (permitiendo el redondeo)

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>

los valores de x permanecen sin cambios, los valores de y se calculan como y + x * tan(angle)

matriz

Aplicar una matriz de transformación a un polígono:

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 30,0 30,30 0,30" transform="matrix(1,0.6,-1.2,1,40,10)" />
</svg>

Cada punto (x, y) se transformará aplicando la matriz (a, b, c, d, e, f) de la siguiente manera:

┌ x_new ┐    ┌ a  c  e ┐ * ┌ x_old ┐   ┌ x_old * a + y_old * c + e ┐
└ y_new ┘ =  └ b  d  f ┘   │ y_old │ = └ x_old * b + y_old * d + f ┘
                           └   1   ┘

El resultado es equivalente a

<svg xmlns="http://www.w3.org/2000/svg">
    <polygon points="40,10 70,28 34,58 4,40" />
</svg>

Transformaciones multiples

Las transformaciones se pueden concatenar y se aplican de derecha a izquierda.

Gire un rectángulo 90 grados y luego muévalo hacia abajo 20 unidades y hacia la derecha 20 unidades:

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="-10" y="-20" width="20" height="40"
        transform="translate(20 20) rotate(90)" />
</svg>

El resultado es equivalente a

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="10" width="40" height="20" />
</svg>


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow