Grafici con Canvas e SVG - HTML5 con CSS e JavaScript - page 223

Object Model (DOM) della pagina stessa, che poi approfondiremo meglio nel corso dei
capitoli dedicati a JavaScript.
Questo fatto comporta che gli elementi SVG, come quelli di HTML5, formano una
struttura ad albero, che possiamo consultare a runtime con i linguaggi di scripting. Per que-
sto, diventa possibile intercettare eventi, manipolarne le proprietà, rimuovere o aggiungere
elementi, anche con l'aiuto di librerie come jQuery , non solo direttamente con JavaScript.
L'obiettivo che riusciamo a raggiungere è quello di dare maggiore interattività agli elemen-
ti, caratteristica che va ad aggiungersi alla lista dei vantaggi che offre SVG rispetto alle
bitmap.
Per una dimostrazione pratica, riprendiamo il grafico a torta visto in precedenza e ag-
giungiamogli interattività: inseriamo nella pagina HTML un tag script e, con l'aiuto di
JavaScript, cerchiamo gli elementi g che raggruppano i path e il testo di ogni fetta della
torta.
Esempio 10.18
<script type="text/javascript">
var elements = document.getElementsByTagName('div');
for (i = 0; i < elements.length; i++)
{
var element = elements[i];
element.addEventListener("mouseover", function () {
this.setAttribute("transform", "scale(1.1)");
document.getElementById("current").innerHTML =
this.textContent;
}, false);
element.addEventListener("mouseleave", function () {
this.removeAttribute("transform");
}, false);
}
</script>
Nell'esempio 10.18 possiamo vedere come allo startup cerchiamo ogni raggruppamento e
intercettiamo gli eventi mouseover e mouseleave .