Developer

Animazioni con il linguaggio SVG (Scalable Vector Language)

SVG, Scalable Vector Language, è un linguaggio XML based che si pone come valida alternativa al più blasonato Macromedia Flash. L’utilizzo del linguaggio XML come strumento di sviluppo, fa si che SVG sia di immediata comprensione, potente e soprattutto cross-platform. Oltre alla possibilità di definire elementi grafici di tipo statico, SVG implementa anche una serie di funzioni che consentono di aggiungere animazione ed interattività agli oggetti. Nell’esempio che segue realizziamo un’applicazione che data una curva complessa ed una freccia rossa, quest’ultima nell’arco temporale di 3 secondi percorre il percorso delineato dalla curva:

< !DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    “
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd“>

        style=”fill: none; stroke: green;”/>

      dur=”3s” fill=”freeze”/>

Mediante il tag path si definisce la curva:

Sempre mediante l’ausilio del tag path si crea la freccia rossa che seguirà il percorso definito dalla curva:

Il tag animateMotion ci consente di “indicare” alla freccia di seguire il medesimo percorso specificato dalla curva definita in precedenza e di percorrere l’intero tragitto in 3 secondi (dur=”3s”) :

Copiando il testo in un file .svg e aprendolo con un browser capace di interpretare il linguaggio SVG (esistono plug-in sia per Firefox che per Internet Explorer) possiamo ammirare l’animazione.

Comment here