Ricerca…


Osservazioni

Gli elementi grafici possono essere modificati aggiungendo un attributo transform .

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

Invece che l'origine in alto a sinistra viene renderizzata alle coordinate (0, 0), verrà mostrata in basso ea destra, dal punto (10, 10).

Intere gruppi di elementi possono essere trasformati insieme e le trasformazioni possono aggiungersi l'una all'altra.

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

Innanzitutto, ogni punto del cerchio verrà ridimensionato con il fattore 3 in relazione all'origine, portando il centro del cerchio al centro del rettangolo in (15, 15) e il suo raggio a 15. Quindi, il rettangolo e il il cerchio verrà ruotato di 45 gradi in senso orario attorno all'origine.

tradurre

Sposta un rettangolo di 10 unità a destra e 20 unità in basso:

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

Sposta 0 unità orizzontalmente e 20 unità in alto:

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

Sposta 10 unità a sinistra e 0 unità verticalmente:

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

scala

Ridimensionare un rettangolo orizzontalmente per il fattore 2 e verticalmente per il fattore 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>

Il risultato è equivalente a

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

Specchia un rettangolo in orizzontale:

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

La scala funziona in relazione all'origine, quindi questo è equivalente a

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

ruotare

Ruota un poligono in senso orario di 90 gradi attorno all'origine:

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

Il risultato è equivalente a

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

Il centro di rotazione può essere dato esplicitamente:

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

Il risultato è equivalente a

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

skewX, skewY

inclinare un poligono in orizzontale di 45 gradi:

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

Il risultato è equivalente a

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

i valori x sono calcolati come x + y * tan(angle) , i valori y rimangono invariati

inclina verticalmente un poligono di 30 gradi:

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

Il risultato è equivalente a (tenendo conto dell'arrotondamento)

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

i valori x rimangono invariati, i valori y sono calcolati come y + x * tan(angle)

matrice

Applicare una matrice di trasformazione a un poligono:

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

Ogni punto (x, y) verrà trasformato applicando la matrice (a, b, c, d, e, f) in questo modo:

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

Il risultato è equivalente a

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

Trasformazioni multiple

Le trasformazioni possono essere concatenate e applicate da destra a sinistra

Ruota un rettangolo di 90 gradi, quindi spostalo verso il basso di 20 unità e verso destra di 20 unità:

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

Il risultato è 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
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow