SVG permette di rendere un documento interattivo, in grado cioé di rispondere a certi eventi come ad esempio il click o il movimento del mouse. Gli eventi possono essere gestiti associandogli degli script che vengono mandati in esecuzione allo scatenarsi dell'evento stesso.
Nel capitolo precedente abbiamo già incontrato un esempio di gestione di eventi con onload (che corrisponde all'evento di caricamento del file SVG da parte del visualizzatore) ed in quel caso era stato gestito associandogli la funzione aggiungirect.
Gli eventi principali gestiti da SVG sono:
- onclick: evento scatenato dal click del mouse su di un elemento grafico;
- onmousemove: evento associato al movimento del mouse;
- onmouseover: evento scatenato dal passaggio del mouse su di un oggetto grafico;
- onmouseout: evento scatenato quando il puntatore del mouse abbandona l'area di un elemento grafico;
- onmousedown: evento associato alla pressione del tasto del mouse su di un elemento grafico;
- onload: evento scatenato quando il documento SVG viene caricato dal visualizzatore.
Consideriamo adesso un esempio di immagine interattiva:
<svg width="500" height="300" viewBox="0 0 500 300">
<script type="text/ecmascript"><![CDATA[
function cambiaColore(evt){
var elem=evt.target;
var vecchioColore=elem.getAttribute("fill");
if (vecchioColore=="blue") nuovoColore="yellow"
else nuovoColore="blue";
elem.setAttribute("fill",nuovoColore);
}
function cambiaRaggio(evt,dimensioneRaggio){
var elem=evt.target;
elem.setAttribute("r",dimensioneRaggio);
}
]]></script>
<rect id="rettangolo1" x="10" y="10" width="150" height="100" fill="blue" stroke="black" stroke-width="2" onclick="cambiaColore(evt,'yellow')" />
<circle id="cerchio" cx="350" cy="150" r="50" fill="red" stroke="black" stroke-width="2" onmouseover="cambiaRaggio(evt,'100')" onmouseout="cambiaRaggio(evt,'50')"/>
</svg>
Link esempio: eventi.svg
Come si vede dall'esempio, per associare un evento ad un elemento grafico è sufficiente inserire l'attributo relativo all'evento considerato all'interno dell'elemento ed indicare come valore di questo attributo il nome della funzione da invocare.
Nel nostro caso abbiamo associato l'evento onclick al rettangolo e gli eventi onmouseover e onmouseout al cerchio. Grazie alle funzioni che abbiamo associato agli eventi, il rettangolo dell'esempio cambia colore in seguito ad un click, diventando giallo se il precedente colore è giallo o blu in caso contrario; mentre il cerchio cambia la sua dimensione in seguito al passaggio del puntatore del mouse, aumentando la dimensione del raggio fino a 100 pixel (evento onmouseover) e ritornando successivamente ad un raggio di 50 pixel (evento onmouseout).
Osservando il codice dell'esempio, e' importante sottolineare l'utilizzo del parametro evt e del metodo target.
Evt permette di identificare l'elemento grafico a cui abbiamo associato l'evento scatenato e tale informazione viene passata come parametro alle funzioni relative alla gestione degli eventi. Attraverso il metodo target siamo in grado di ottenere un riferimento all'elemento grafico a cui è associato l'evento. Come si vede dall' esempio, l'uso di evt.target ci permette quindi di memorizzare facilmente all'interno di una variabile, un riferimento all'oggetto su cui è stato scatenato l'evento.
