UP PREVIOUS NEXT   Technologies Internet et Education, © TECFA
  3. Interactivité avec SVG

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é

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

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

<circle onmouseover="circle_click(evt) " cx="300" cy="225" r="100" fill="red"/>

"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

  <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>
  
 
<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>
    
 
<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)

UP PREVIOUS NEXT -- TIE