HTML and CSS Reference
In-Depth Information
Gli esempi mostrati finora sfruttano le funzionalità di posizionamento degli elementi, ma
questo non è sempre sufficiente e, soprattutto, complica il lavoro se vogliamo applicare ef-
fetti e manipolazioni, come vedremo più avanti nel capitolo.
Fortunatamente, ci viene in aiuto l'attributo
transform
, che permette di indicare le
trasformazioni da applicare agli shape, agli
use
e alle immagini. Per capire come utilizzar-
le, riprendiamo la torta e stacchiamo una fetta, come mostrato
nell'esempio 10.14
.
Esempio 10.14
<path fill="url(#blueg)"
d="M 310,402 L 213,214 L 326,35 C 454,111 468,319 310,402
z"
transform="translate(10,0)"
/>
La funzione
translate
indica, attraverso i parametri
x
e
y
, di quanti pixel spostare
l'intero elemento. Questo aspetto delle specifiche facilita moltissimo il lavoro, perché non
dobbiamo rivedere tutte le coordinate del
path
e, soprattutto, è una tecnica applicabile an-
che ai gruppi.
La traslazione non è l'unica funzione disponibile: nella
tabella 10.3
possiamo trovare
la lista completa delle funzioni di trasformazione, con i relativi parametri.
Funzione
Descrizione
Parametri
translate
Trasla l'elemento in tutte le direzioni.
x,y
Scala l'elemento, rimpicciolendolo o ingrandendolo
a seconda dei parametri.
scale
sx,sy
rotate
Ruota l'elemento in base all'angolo e al centro.
angle,cx,cy
Inclina orizzontalmente l'elemento in base
all'angolo.
skewX
angle
skewY
Inclina verticalmente l'elemento in base all'angolo.
angle
Permette di creare una trasformazione in base a una
matrice di 6x6.
matrix
a,b,c,d,e,f
Tabella 10.3
- Le funzioni di trasformazione messe a disposizione da SVG.
