3. Interactivité avec SVG

3.2 Evénements de base SVG/SMIL

La spécification SVG1 définit plus de 20 événements
Les plus importants peuvent être capturés par des "attributs d'événements" qu'on insère dans les balises qu'on veut rendre interactives.
Il existe certains événements sans attributs qui concernent la modification de l'arbre DOM
En plus, à l'aide du Modèle Objet de Document (DOM) de SVG, un script peut enregistrer des guetteurs d'événements (event handlers) DOM2 de manière à ce qu'un script puisse être invoqué quand un événement donné survient .

Noms d'événement et attributs d'événement: petit résumé

le nom de l'événement sera utilisé pour identifier un event dans des balises d'animation (comme "begin").

<animateColor fill="freeze" dur="0.1s" to="blue" from="yellow"

attributeName="fill" begin="mouseover"/>

l'attribut d'événement permet de placer des "guetteurs d'événement" (event handlers) et qui pourront déclencher des scripts (voir 4. "Interactivité avec le DOM et EcmaScript" [27]

Donc attention : Ne confondez pas nom d'événement à utiliser dans les attributs des éléments d'animation et attributs d'événements pour lancer des scripts !!

"mouseover" pas égal à "onmouseover" (.... ou vous perdrez qq. heures ...)

La table suivante réunit la définition de quelques éléments et attributs associés

Nom de l'événement	Description: un événement survient quand ...	Attribut d'événement
focusin	un élément reçoit l'attention (le focus), par ex. l'élément 'text' devient sélectionné.	onfocusin
focusout	un élément perd l'attention, (désélection).	onfocusout
activate	un élément est activé, par exemple, au travers d'un clic de souris ou l'appui d'une touche. Un argument numérique est fourni pour indiquer le type d'activation : 1 pour une activation simple (par ex. simple clic ou la touche Entrée), 2 pour une hyperactivation (par ex. un double-clic ou la combinaison de touches).	onactivate
click	le bouton du dispositif de pointage (souris, touchpad, stylo etc.) est cliqué au-dessus d'un élément. Un clic est l'appui et le relâchement du bouton de la souris au-dessus d'une même position sur l'écran. (mousedown/mouseup sont avant/après).	onclick
mousedown	le bouton de pointage est pressé au-dessus d'un élément.	onmousedown
mouseup	le bouton de pointage est relâché au-dessus d'un élément.	onmouseup
mouseover	le dispositif de pointage est déplacé sur un élément.	onmouseover
mousemove	le dispositif de pointage est déplacé alors qu'il est au-dessus d'un élément..	onmousemove
mouseout	le dispositif de pointage (souris) est écarté de l'élément.	onmouseout
SVGLoad	le client a complètement interprété l'élément et ses descendants il est prêt à agir de manière appropriée sur cet élément (affichage par exemple). Les ressources externes appelées requises doivent être chargées, interprétées et prêtes aussi.	onload
SVGUnload	le client enlève le document SVG (élément svg le plus externe)	onunload
SVGAbort	le chargement de la page est interrompu avant qu'un élément ait pu être complètement chargé.	onabort
SVGError	un élément ne se charge pas correctement ou quand une erreur survient lors de l'exécution d'un script.	onerror
SVGResize	une vue de document (svg le plus externe) est redimensionnée.	onresize
SVGScroll	une vue du document est glissée sur X, sur Y ou les deux.	onscroll
SVGZoom	le document change de niveau de zoom lors d'une interaction avec l'utilisateur. (éléments 'svg' les plus externes).	onzoom
beginEvent	un élément d'animation commence. voir la description de l'interface TimeEvent dans la spéci.SMIL	onbegin
endEvent	un élément d'animation s'achève (voir TimeEvent)	onend
repeatEvent	un élément d'animation se répète. Il est déclenché toutes les fois où l'élément se répète, après la première itération. (voir l'interface TimeEvent aussi)	onrepeat

Exemple 3-1: Simple animation avec un événement mouseover

http://tefa.unige.ch/guides/svg/ex/mouse-over/mouse-over1.svg
Un lien vers un autre URL se met simplement autour de l'élément cliquable

  <a xlink:href="http://tecfa.unige.ch">

   <rect style="fill:#00FF00;stroke:#00FF00" width="200"
          height="26" ry="5" rx="5" y="100" x="100"/>

  </a>

L'ellipse jaune qui contient un texte va activer une animation (changement de couleur) lorsqu'on glisse la souris dessus ou lorsqu'on la sort de nouveau (l'attribut "begin" va s'activer lorsqu'il y a un mouseover ou un mouseout).

<g transform="translate(100,100)">

    <ellipse stroke-width="2" stroke="black" fill="yellow" ry="1cm" rx="2cm"

             id="hint_button"
>

      <animateColor fill="freeze" dur="0.1s" to="blue" from="yellow"

                    attributeName="fill" begin="mouseover"/>

      <animateColor fill="freeze" dur="0.1s" to="yellow" from="blue"

                    attributeName="fill" begin="mouseout"/
>

    </ellipse>

    <text style="font-size:12;" alignment-baseline="middle" x="-1cm">Touch me !</text>

</g>

Ensuite, on a un contenu caché et qui s'affiche lorsque l'élément qui a l'id " hint_button " a un mouseover. Autrement dit: l'attribut "begin" d'une animation ne peut pas seulement être un temps, un événement de l'élément parent comme ci-dessus, mais également un événement qui a lieu dans un autre élément (l'ellipse dans notre cas anime la propriété style du cercle caché)!!

<g transform="translate(100,200)" style="display:none">

<circle style="fill:yellow;" r="2cm" cy="1cm" cx="1cm"/>

    <text style="font-size:12;" alignment-baseline="middle" x="-0.8cm" y="1cm">

    Find the scecret URL !</text>

    <animate fill="freeze" dur="0.1s" begin="hint_button.mouseover"

      from="none" to="block" attributeName="display"/>

    <animate fill="freeze" dur="0.1s" begin="hint_button.mouseout"

      from="block" to="none" attributeName="display"/>

</g>

Résumé

Des animations peuvent se déclencher suite à un geste d'utilisateur.
Le geste de l'utilisateur crée un événement géré (ici) par les balises "begin".
Autrement dit, le "begin" fait guetteur d'événement pour l'événement nommé.
Une animation d'un élément peut se déclencher suite à un événement qui a lieu dans un autre élément (on bouge la souris sur l'ellipse et c'est le cercle qui apparaît)

3. Interactivité avec SVG

3.1 Principe et gestion des événements

Voici les types d'interactivité

L'essentiel: SVG comprend

3.2 Evénements de base SVG/SMIL

Noms d'événement et attributs d'événement: petit résumé

La table suivante réunit la définition de quelques éléments et attributs associés

Exemple 3-1: Simple animation avec un événement mouseover

Résumé