SVG
Trasformazione

Sintassi

• transform = " [funzioni] * "
• translate (x [, y])
• ruotare (θ [, x, y])
• scala (x [, y])
• skewX (θ)
• skewY (θ)
• matrice (a, b, c, d, e, f)

Applicazione delle trasformazioni

Le trasformazioni possono essere applicate agli elementi aggiungendo un attributo di transform :

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

O a gruppi di elementi racchiusi tra tag <g> :

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

Più trasformazioni possono essere applicate allo stesso elemento aggiungendole separate da spazi:

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

Funzioni di trasformazione

Tradurre

translate sposta le immagini lungo i vettori specificati:

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

Il primo valore è la traduzione xe il secondo y. Se y viene omesso, verrà impostato su 0.

Scala

scale ridimensiona elementi di rapporti specificati:

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

Come translate , gli argomenti sono x, quindi y. Tuttavia, in scale , se y viene omesso, verrà impostato di default sul valore di x; in altre parole, ridimensiona l'elemento senza modificare le proporzioni.

Ruotare

rotate ruota gli elementi per angoli specificati.

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

Il primo valore è l'angolo, in gradi. La trasformazione viene applicata in senso orario. Gli altri due valori rappresentano il punto da ruotare attorno, in modo predefinito all'origine.