SVG: Trasformazioni, Colori e Animazioni SMIL

Tempo di lettura: 6 min.

Gli obiettivi della guida riassuntiva SVG: trasformazioni, colori e animazioni sono:

• Effettuare trasformazioni sugli elementi SVG
• Assegnare gradienti e pattern
• Animare elementi SVG usando il linguaggio SML

Se hai bisogno di un’infarinatura di base sul linguaggio SVG, dai un’occhiata all’articolo precedente SVG: le basi del linguaggio.

Trasformazioni

Per applicare traslazioni, rotazioni, scaling o inclinamenti a un elemento SVG, si usa l’attributo transform sull’elemento g, esprimendole come sequenza di operazioni separate da spazio.

Tali operazioni possono essere:

• translate(x,y)
• rotate(r,x,y): x e y sono opzionali e indicano il punto attorno a cui effettuare la rotazione di angolo r.
• scale(x,y)
• skewX(x)
• skewY(y)

Ad esempio, con path e il comando arc, è possibile creare un diagramma a torta:

Gradienti

Il gradiente è un elemento SVG attraverso il quale è possibile dipingere un altro elemento SVG con sfumature di colore. Tali sfumature riportano tutte le gradazioni di colore comprese tra due colori impostati come estremi del gradiente.

Per i gradienti lineari, si usa l’elemento linearGradient, di cui vanno definiti gli attributi:

1. id: nome del gradiente.
2. x1,x2,y1,y2: le coordinate del punto di inizio e del punto finale del gradiente.
3. gradientUnits: sistema di riferimento che può essere userSpaceOnUse, se le coordinate sono espresse rispetto al sistema di riferimento dell’immagine, o objectBoundingBox, se sono invece riferite all’elemento grafico a cui è applicato il gradiente.

Per i gradienti circolari, si usa l’elemento radialGradient, i cui attributi sono:

1. id: nome del gradiente.
2. cx,cy,r: coordinate del centro con la misura del raggio massimo del gradiente..
3. gradientUnits: sistema di riferimento che può essere userSpaceOnUse, se le coordinate sono espresse rispetto al sistema di riferimento dell’immagine, o objectBoundingBox, se sono invece riferite all’elemento grafico a cui è applicato il gradiente.
4. fx,fy: coordinate del punto focale.

In entrambi i casi, i colori vanno indicati tramite i sottoelementi stop, che hanno gli attributi stop-color e offset.

Per assegnare un gradiente ad un elemento grafico, basta assegnare al suo attributo fill il valore url(#nomeGradiente), dove nomeGradiente corrisponde all’id del gradiente.

Pattern

Un pattern è un elemento SVG utilizzato per riempire un altro elemento SVG con motivi grafici predefiniti. Tali motivi sono ottenuti componendo elementi grafici SVG che vengono ripetuti ad intervalli regolari in modo da ricoprire tutta l’area dell’elemento considerato.

Si usa l’elemento pattern che, in modo simile ai gradienti, ha gli attributi:

1. id: nome del gradiente.
2. x,y,width,height: posizione e dimensione della cella base che costituisce il pattern.
3. gradientUnits: sistema di riferimento che può essere userSpaceOnUse, se le coordinate sono espresse rispetto al sistema di riferimento dell’immagine, o objectBoundingBox, se sono invece riferite all’elemento grafico a cui è applicato il gradiente.

All’interno di questo elemento va definito l’elemento SVG base.

Animazioni SMIL

SMIL sta per Synchronized Multimedia Integration Language ed è un metodo alternativo al Javascript per l’animazione degli SVG, utilizzando un insieme di elementi base che sono integrati con gli elementi SVG, dei quali si definiscono gli attributi per specificare: i valori iniziali e finali dei valori che si vogliono animare, l’istante iniziale dell’animazione, la durata, ecc. .

Alcuni elementi base sono:

• animate: per animare un singolo attributo
• animateMotion: per animare un oggetto grafico lungo un percorso definito da un path, che può essere un elemento SVG preso come riferimento attraverso il sottoelemento mpath (utilizzando xlink:href e l’id di tale elemento), oppure definito come attributo dell’elemento animateMotion stesso.
• animateTransform

Attributo	Descrizione
attributeName	nome dell’attributo dell’elemento SVG sul quale avviare un’animazione.
begin	specifica l’inizio dell’animazione attraverso un valore temporale (in secondi) o un evento.
dur	durata dell’animazione.
end	termine dell’animazione.
restart	indica quando deve essere ripetuta l’animazione: always, whenNotActive, never.
repeatCount	numero di ripetizioni dell’animazione.
repeatDur	durata totale delle ripetizioni.
fill	comportamento dell’elemento a fine animazione: remove o freeze.
from	valore iniziale dell’attributo da animare.
to	valore finale dell’attributo da animare.
values	valori che assume l’attributo dell’elemento animato.
calcMode	interpolazione utilizzata per produrre l’animazione: discrete, linear, paced, spline.
keyTimes	valori temporali utilizzati per la temporizzazione dell’animazione
keySplines	serie di punti di controllo per le curve di Bezier relativi alla lista di valori espressi in keyTimes

Animazioni multiple per uno stesso elemento si ottengono specificando, all’interno dell’elemento SVG interessato, la sequenza degli elementi SMIL da applicare.

Sincronizzare le animazioni

Per fare in modo che un’animazione inizi quando ne finisce un’altra, basta utilizzare l’attributo begin valorizzato con il nome dell’animazione (dato dall’attributo id) che bisogna attendere seguito da .end.

begin="NomePrimaAnimazione.end"