SVG e Javascript

Tempo di lettura: 4 min.

L’interattività degli SVG si realizza grazie all’utilizzo di Javascript (o un altro linguaggio compatibile con lo standard ECMA) o di un sistema di gestione degli eventi.

<svg width="100%" height="100%"> <script> </script> </svg>

All’interno di una funzione Javascript si utilizza l’oggetto document per interagire con un documento SVG. In particolare, per far riferimento al nodo radice si utilizza document.rootElement. Oppure si può fare riferimento a un nodo qualsiasi con document.getElementById().

Un’altro modo per far riferimento a un qualsiasi nodo è utilizzare metodi e proprietà che sfruttano il loro rapporto gerarchico:

• parentNode
• firstChild
• nextSibling
• hasChildNodes()
• childNodes
• childNodes.length
• childNodes.item(x)
• NodeValue
• NodeName

Gestione degli eventi DOM

Per gli elementi SVG sono disponibili gli stessi eventi dei comuni elementi HTML, come load, click, mouseover, mouseout.

https://www.w3schools.com/jsref/dom_obj_event.asp)

evt (o event) è un particolare oggetto generato quando si verifica un evento. Questo oggetto può essere passato come parametro degli handler e ha diverse proprietà e metodi. Ad esempio, attraverso la proprietà target è possibile conoscere l’elemento che ha generato l’evento.

Accedere agli attributi degli elementi SVG

Per accedere al valore di un attributo di un elemento SVG attraverso Javascript si utilizzano i metodi elemento.getAttribute(“nomeAttributo”) oppure elemento.hasAttribute(“nomeAttributo”).

Si può anche modificare il valore degli attributi con il metodo elemento.setAttribute(“nomeValore”, “nuovoValore”). Se viene lasciato vuoto il secondo argomento, l’attributo viene rimosso.

Aggiungere, rimuovere e rimpiazzare elementi SVG

Per creare un nuovo elemento SVG si utilizza il metodo document.createElementNS(“http://www.w3.org/2000/svg” ,”nomeTag”). Dopodiché bisogna aggiungerlo al DOM con elementoPadre.appendChild(nuovoElemento).

Per rimuovere un elemento SVG, si usa nodoPadre.removeChild(elemento).

Si può anche rimpiazzare un elemento con nodoPadre.replaceChild,nuovoElemento, vecchioElemento).

All’interno di uno script è possibile aggiungere ascoltatori di eventi agli elementi SVG. Per fare questo si utilizza il metodo elemento.addEventListener(“evento”, “nomeFunzione”)

Interazione tra SVG e Javascript

HTML è già un modo per dare un’interfaccia grafica (GUI) a Javascript. Se si unisce SVG alle tecnologie utilizzate da un’applicazione web, si possono aggiungere capacità grafiche a Javascript, che ne è privo, e allo stesso tempo aggiungere una GUI a SVG.

Per accedere da uno script Javascript incluso in una pagina HTML agli elementi di un documento SVG incluso tramite l’elemento object o l’elemento embed, si utilizzare il metodo document.elementoEmbedded.getSVGDocument().

Esercizio riassuntivo

Cliccando nell’area contornata viene aggiunto un rettangolo di dimensioni, colore e opacità casuali.

Cliccando su un singolo rettangolo gli viene assegnato il focus, dal quale si può navigare tra gli altri rettangoli premendo il tasto tab.

Cliccare su un rettangolo che ha il focus gli fa cambiare colore e opacità con una transizione. Mentre se si preme il tasto backspace o il tasto destro del mouse, lo si elimina.

Il progetto con il codice per replicare questo esercizio si trova su GitHub.
Oppure si può scaricare il file SVG indipendente presente nell’inventario.