4 septembre 2001

16 L'interactivité


Contenu


 

16.1 Introduction

Un contenu SVG peut être rendu interactif (i.e., répondre aux événements initiés par l'utilisateur) en utilisant les possibilités suivantes du langage SVG :

Ce chapitre présente :

On peut trouver des informations en relation dans d'autres chapitres :

16.2 La liste complète des événements reconnus

Les aspects de SVG suivants sont affectés par des événements :

Le tableau suivant donne la liste de tous les événements reconnus et gérés dans SVG. Le Nom de l'événement, dans la première colonne, est celui à utiliser dans les éléments d'animation de SVG pour définir les évéements qui commencent ou finissent les animations. Le Nom DOM2, dans la troisième colonne, est celui à utiliser lors de la définition des guetteurs d'événements DOM2. Le Nom de l'attribut d'événement, dans la cinquième colonne, contient le nom des attributs d'événement correspondant qui peut être attaché aux éléments dans le langage SVG.

Nom de l'événement Description Nom DOM2 Catégorie DOM2 Nom de l'attribut d'événement
focusin Survient quand un élément reçoit l'attention [N.d.T. focus], comme quand un élément 'text' devient sélectionné. DOMFocusIn UIEvent onfocusin
focusout Survient quand un élément perd l'attention, comme quand un élément 'text' devient non sélectionné. DOMFocusOut UIEvent onfocusout
activate Survient quand 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, donnant l'indication du type d'activation qui survient : 1 pour une activation simple (par exemple, un simple clic ou la touche Entrée), 2 pour une hyperactivation (par exemple, un double-clic ou la combinaison de touches Majuscule Entrée). DOMActivate UIEvent onactivate
click Survient quand le bouton du dispositif de pointage est cliqué au-dessus d'un élément. On définit un clic comme étant l'appui et le relâchement de la souris au-dessus d'une même position sur l'écran. La séquence de ces événements est : mousedown, mouseup, click. Si plusieurs clics surviennent sur la même position de l'écran, la séquence se repète avec l'attribut detail qui est incrémenté à chaque répétition. (idem) MouseEvent onclick
mousedown Survient quand le bouton du dispositif de pointage est pressé au-dessus d'un élément. (idem) MouseEvent onmousedown
mouseup Survient quand le bouton du dispositif de pointage est relâché au-dessus d'un élément. (idem) MouseEvent onmouseup
mouseover Survient quand le dispositif de pointage est déplacé sur un élément. (idem) MouseEvent onmouseover
mousemove Survient quand le dispositif de pointage est déplacé alors qu'il est au-dessus d'un élément.. (idem) MouseEvent onmousemove
mouseout Survient quand le dispositif de pointage est écarté de dessus un élément. (idem) MouseEvent onmouseout
DOMSubtreeModified Ceci est un événement général pour la notification de tous les changements du document. On peut l'utiliser à la place des événements plus spécifiques dont la liste suit. (La définition normative de cet événement est la description qui se trouve dans la spécification DOM2.) (idem) MutationEvent aucun
DOMNodeInserted Déclenché quand un nœud a été rajouté comme enfant d'un autre nœud. (La définition normative de cet événement est la description qui se trouve dans la spécification DOM2.) (idem) MutationEvent aucun
DOMNodeRemoved Déclenché quand un nœud est en train d'être retiré d'un autre nœud. (La définition normative de cet événement est la description qui se trouve dans la spécification DOM2.) (idem) MutationEvent aucun
DOMNodeRemovedFromDocument Déclenché quand un nœud est en trait d'être retiré d'un document soit par son retrait direct, soit par le retrait d'un sous-arbre qui le contient. (La définition normative de cet événement est la description qui se trouve dans la spécification DOM2.) (idem) MutationEvent aucun
DOMNodeInsertedIntoDocument Déclenché quand un nœud est en train d'être inséré dans un document soit par son insertion directe, soit par l'insertion d'un sous-arbre qui le contient. (La définition normative de cet événement est la description qui se trouve dans la spécification DOM2.) (idem) MutationEvent aucun
DOMAttrModified Déclenché après qu'un attribut est modifié sur un nœud. (La définition normative de cet événement est la description qui se trouve dans la spécification DOM2.) (idem) MutationEvent aucun
DOMCharacterDataModified Déclenché après que les données textuelles [N.d.T. CharacterData] sont modifiées dans un nœud, mais le nœud lui-même n'étant ni inséré ni effacé. (La définition normative de cet événement est la description qui se trouve dans la spécification DOM2.) (idem) MutationEvent aucun
SVGLoad L'événement est déclenché à l'instant où l'agent utilisateur a complètement interprété l'élément et ses descendants et où il est prêt à agir de manière appropriée sur cet élément, comme être prêt pour rendre l'élément sur l'appareil cible. Les ressources externes appelées requises doivent être chargées, interprétées et prêtes pour leur rendu avant que l'événement soit déclenché (idem) aucun onload
SVGUnload Ne s'applique qu'aux éléments 'svg' les plus externes. L'événement unload survient quand l'implémentation DOM retire un document d'une fenêtre ou d'un cadre. (idem) aucun onunload
SVGAbort L'événement abort survient quand le chargement de la page est interrompu avant qu'un élément a pu être complètement chargé.. (idem) aucun onabort
SVGError L'événement error survient quand un élément ne se charge pas correctement ou quand une erreur survient lors de l'exécution d'un script. (idem) aucun onerror
SVGResize L'événement resize survient quand une vue de document est redimensionnée. (Ne s'applique qu'aux éléments 'svg' les plus externes).
« errata 2002-11-15 »
(idem) aucun onresize
SVGScroll L'événement scroll survient quand une vue de document est glissée sur X, sur Y ou les deux, comme lorsqu'on fait défiler une vue de document ou qu'on effectue un panoramique sur celui-ci. (Ne s'applique qu'aux éléments 'svg' les plus externes).
« errata 2002-11-15 »
(idem) aucun onscroll
SVGZoom Survient quand le document change de niveau de zoom lors d'une interaction avec l'utilisateur. (Ne s'applique qu'aux éléments 'svg' les plus externes).
« errata 2002-11-15 »
aucun aucun onzoom
beginEvent Survient quand un élément d'animation commence. Pour le détail, voir la description de l'interface TimeEvent dans la spécification SMIL Animation. aucun aucun onbegin
endEvent Survient quand un élément d'animation s'achève. Pour le détail, voir la description de l'interface TimeEvent dans la spécification SMIL Animation. aucun aucun onend
repeatEvent Survient quand 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. Pour le détail, voir la description de l'interface TimeEvent dans la spécification SMIL Animation. aucun aucun onrepeat

Ainsi que dans Les événements de touche DOM2, la spécification SVG n'offre pas de jeu d'événements de touche. Un jeu d'événements conçu pour les appareils avec entrée au clavier sera inclus dans des versions ultérieures des spécifications du DOM et de SVG.

Un événement SVGLoad est seulement envoyé à l'élément sur lequel l'événement s'applique ; il n'est pas envoyé à ses ancêtres. Par exemple, si un élément 'image' et son élément parent 'g' ont tous deux des guetteurs d'événements à l'écoute d'événements SVGLoad, quand l'élément 'image' aura été chargé, seul son guetteur d'événement sera invoqué. (Le guetteur d'événement de l'élément 'g' sera en effet invoqué, mais cette invocation n'interviendra que quand l'élément 'g' en question aura été chargé).

Le détail des paramètres transmis aux guetteurs d'événements pour les types d'événement de DOM2 peut être trouvé dans la spécification DOM2. Pour les autres types d'événement, les paramètres transmis aux guetteurs d'événements sont décrits ailleurs dans cette spécification.

16.3 Les événements de l'interface utilisateur

Avec les agents utilisateurs qui gèrent l'interactivité, les auteurs définissent couramment des documents SVG qui répondent aux événements de l'interface utilisateur. Parmi le jeu possible des événements utilisateur, on trouve les événements de pointeur, les événements de clavier et les événements de document.

En réponse aux événements de l'interface utilisateur (UI), l'auteur peut démarrer une animation, activer un hyperlien vers une autre page Web, illuminer une partie du document (par exemple, changer la couleur des éléments graphiques se trouvant sous le pointeur), initier un « roll-over » (par exemple, faire apparaître à côté des éléments graphiques qui étaient précédemment cachés) ou lancer un script qui communique avec une base de données distantes.

Pour toutes les fonctions liées aux événements de l'interface utilisateur définies comme faisant partie du langage SVG via des attributs d'événement, ou d'animation, le modèle d'événement correspond au modèle de bouillonnement d'événement décrit dans DOM2 [DOM2-EVBUBBLE]. Le modèle de capture d'événement de DOM2 [DOM2-EVCAPTURE] ne peut être établi qu'à partir d'appels de méthode DOM.

16.4 Les événements de pointeur

Les événements de l'interface utilisateur qui surviennent en raison des actions de l'utilisateur sur un dispositif de pointage sont appelés des événements de pointeur.

De nombreux systèmes gèrent des dispositifs de pointage, comme une souris ou un trackball. Sur les systèmes utilisant une souris, les événements de pointeur consistent en actions telles que déplacements et clics de souris. Sur ceux ayant un dispositif de pointage différent, le dispositif de pointage émule souvent le comportement de la souris en offrant un mécanisme pour les actions équivalentes de l'utilisateur, comme l'appui d'un bouton qui équivaut au clic d'une souris.

Pour chaque événement de pointeur, l'agent utilisateur SVG détermine l'élément cible de l'événement de pointeur donné. L'élément cible est l'élément graphique sur le dessus dont le contenu graphique concerné est sous le pointeur à l'instant de l'événement. (Voir la propriété 'pointer-events' pour une description de la manière de déterminer si le contenu graphique concerné d'un élément se trouve sous le pointeur et ainsi quand l'élément graphique peut être une cible pour un événement de pointeur). Quand un élément n'est pas affiché (i.e., quand la propriété 'display' de l'élément, ou d'un de ses ancêtres, a une valeur de none), alors cet élément ne peut pas être la cible d'un événement de pointeur.

L'événement soit est envoyé initialement à l'élément cible, ou à l'un de ses ancêtres, soit n'est pas envoyé, selon ce qui suit :

Quand le bouillonnement d'événement [DOM2-EVBUBBLE] est actif, le bouillonnement remonte à tous les ancêtres directs de l'élément cible. Les éléments descendants reçoivent les événements avec leurs ancêtres. Ainsi, si un élément 'path' est un enfant d'un élément 'g', les deux ayant un guetteur d'événement pour un événement click, alors l'événement sera envoyé à l'élément 'path', avant l'élément 'g'.

Quand la capture d'évément [DOM2-EVCAPTURE] est active, les éléments ancêtres reçoivent les événements avant leurs descendants.

Après qu'un événement a été initialement envoyé à un élément particulier, à moins qu'une décision appropriée n'ait été prise pour empêcher la suite du traitement (par exemple, en invoquant les méthodes DOM preventCapture() ou preventBubble()), l'événement sera transmis au gestionnaire d'événement approprié (s'il y en a un), de l'ancêtre de l'élément (dans le cas d'un bouillonnement d'événement), ou du descendant de cet élément (dans le cas d'une capture d'événement) pour la suite du traitement.

16.5 L'ordre de traitement des événements de l'interface utilisateur

L'ordre de traitement des événements de l'interface utilisateur est le suivant :


16.6 La propriété 'pointer-events'

Dans certaines circonstances, les auteurs peuvent souhaiter contrôler dans quelles conditions des éléments graphiques particuliers deviennent les cibles d'événements de pointeur. Par exemple, l'auteur peut souhaiter qu'un élément donné ne reçoive des événements de pointeur que quand le pointeur survole le périmètre liseré d'une forme donnée. Dans d'autres cas, l'auteur peut souhaiter qu'un élément donné ignore les événements de pointeur en toutes circonstances et, ainsi, que les éléments graphiques, en-dessous de l'élément en question, deviennent les cibles de ces événements de pointeur.

Par exemple, supposons un cercle, avec une propriété 'stroke' de valeur red (i.e., le contour est en trait plein rouge) et une propriété 'fill' de valeur none (i.e., l'intérieur n'est pas peint), qui soit rendu directement sur un rectangle, avec une propriété 'fill' de valeur blue. L'auteur peut souhaiter que le cercle ne soit la cible d'événements de pointeur que quand le pointeur survole le périmètre du cercle. Quand le pointeur survole l'intérieur du cercle, l'auteur peut souhaiter que le rectangle sous-jacent soit l'élément cible des événements de pointeur.

La propriété 'pointer-events' indique les circonstances dans lesquelles un élément graphique donné peut être l'élément cible d'un événement de pointeur. Elle agit sur le traitement des circonstances suivantes :

'pointer-events'
Valeur :   visiblePainted | visibleFill | visibleStroke | visible |
painted | fill | stroke | all | none | inherit vf.
Valeur initiale :   visiblePainted
S'applique à :   ceux des éléments graphiques
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel
Animable :   oui
visiblePainted
L'élément en question peut être la cible d'événements de pointeur, quand la propriété 'visibility' a une valeur de visible et quand le pointeur survole une aire « peinte ». Le pointeur est sur une aire peinte, quand il survole l'intérieur (i.e., le remplissage) de l'élément et que la propriété 'fill' a une valeur autre que "none", ou quand il survole le périmètre (i.e., le liseré) de l'élément et que la propriété 'stroke' a une valeur autre que "none".
visibleFill
L'élément en question peut être la cible d'événements de pointeur, quand la propriété 'visibility' a une valeur de visible et quand le pointeur survole l'intérieur (i.e., le remplissage) de l'élément. La valeur de la propriété 'fill' n'affecte pas de traitement de l'événement.
visibleStroke
L'élément en question peut être la cible d'événements de pointeur, quand la propriété 'visibility' a une valeur de visible et quand le pointeur survole le périmètre (i.e., le liseré) de l'élément. La valeur de la propriété 'stroke' n'affecte pas de traitement de l'événement.
visible
L'élément en question peut être la cible d'événements de pointeur, quand la propriété 'visibility' a une valeur de visible et quand le pointeur survole soit l'intérieur (i.e., le remplissage), soit le périmètre (i.e., le liseré) de l'élément. Les valeurs des propriétés 'fill' et 'stroke' n'effectuent pas de traitement de l'événement.
painted
L'élément en question peut être la cible d'événements de pointeur, quand le pointeur survole une aire « peinte ». Le pointeur est sur une aire peinte quand il survole l'intérieur (i.e., le remplissage) de l'élément et que la propriété 'fill' a une valeur autre que "none", ou quand il survole le périmètre (i.e., le liseré) de l'élément et que la propriété 'stroke' a une valeur autre que "none". La valeur de la propriété 'visibility' n'affecte pas de traitement de l'événement.
fill
L'élément en question peut être la cible d'événements de pointeur, quand le pointeur survole l'intérieur (i.e., le remplissage) de l'élément. Les valeurs des propriétés 'fill' et 'visibility' n'effectuent pas de traitement de l'événement.
stroke
L'élément en question peut être la cible d'événements de pointeur, quand le pointeur survole le périmètre (i.e., le liseré) de l'élément. Les valeurs des propriétés 'stroke' et 'visibility' n'effectuent pas de traitement de l'événement.
all
L'élément en question peut être la cible d'événements de pointeur, toutes les fois que le pointeur survole soit l'intérieur (i.e., le remplissage), soit le périmètre (i.e., le liseré) de l'élément. Les valeurs des propriétés 'fill', 'stroke' et 'visibility' n'effectuent pas de traitement de l'événement.
none
L'élément donné ne reçoit pas d'événements de pointeur.

Pour les éléments de texte, le détection d'une touche s'effectue sur la base de la cellule du caractère :

Pour les images pixélisées, la détection de la touche s'effectue soit sur la base de l'image globale (i.e., l'aire rectangulaire de l'image représente l'un des points déterminant si l'image reçoit l'événement), soit sur la base d'un pixel (i.e., les valeurs alpha des pixels en-dessous du pointeur servent à déterminer si l'image reçoit l'événement) :

Remarquer que pour les images pixélisées, les valeurs des propriétés 'opacity', 'fill-opacity', 'stroke-opacity', 'fill' et 'stroke' n'effectuent pas de traitement de l'événement.

16.7 La magnification et le panoramique

Une magnification représente une transformation uniforme complète d'un fragment de document SVG, dans lequel tous les éléments graphiques subissent une opération de changement d'échelle dans les mêmes proportions. Une opération de magnification produit l'effet d'une transformation supplémentaire en changement d'échelle et en translation placé au niveau le plus externe du fragment de document SVG (i.e., en dehors de l'élément 'svg' le plus externe).

Un panoramique représente une transformation en translation (i.e., un déplacement) sur un fragment de document SVG en réponse à une action sur l'interface utilisateur.

Les agents utilisateurs SVG, opérant dans un environnement autorisant une interaction avec l'utilisateur, doivent gérer les fonctionnalités de magnification et de panoramique.

L'élément 'svg' le plus externe dans un fragment de document SVG a un attribut zoomAndPan, qui prend les valeurs de disable et magnify, celle par défaut étant magnify.

Avec la valeur disable, l'agent utilisateur devra désactiver tous les contrôles de magnification et de panoramique et interdire à l'utilisateur ces opérations sur le fragment de document en question.

Avec la valeur magnify, pour les environnements qui gèrent l'interactivité avec un utilisateur, l'agent utilisateur devra fournir les contrôles qui permettent à l'utilisateur d'effectuer une opération "magnify" sur le fragment de document.

Quand un attribut zoomAndPan est assigné à un élément 'svg' interne, le paramétrage de zoomAndPan sur cet élément 'svg' interne n'aura aucun effet sur l'agent utilisateur SVG.

Animable : non.

16.8 Les curseurs

16.8.1 Introduction aux curseurs

Certains environnements d'affichage interactif offrent la possibilité de modifier l'apparence du pointeur, qu'on appelle également curseur. Trois types de curseur sont disponibles :

On utilise la propriété 'cursor' pour spécifier le curseur à employer. La propriété 'cursor' peut être utilisée pour appeler les curseurs intégrés standards, en spécifiant un mot-clé, comme crosshair, ou pour appeler un curseur personnalisé. Les curseurs personnalisés peuvent être appelés via une valeur <uri> et peuvent désigner soit une ressource externe, comme un fichier de curseur spécifique à une plateforme, soit un élément 'cursor', qui peut définir un curseur indépendant de la plateforme.

16.8.2 La propriété 'cursor'

'cursor'
Valeur :   [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit vf.
Valeur initiale :   auto
S'applique à :   ceux des éléments conteneurs et des éléments graphiques
Héritée :   oui
Pourcentages :   sans objet
Médias :   visuel, interactif
Animable :   oui

Cette propriété spécifie le type de curseur à afficher par le dispositif de pointage. Les significations des valeurs sont les suivantes :

auto
L'agent utilisateur détermine le curseur à afficher en fonction du contexte courant.
crosshair
Une simple mire en croix (par exemple, deux segments de droite courts ressemblant à un signe « + »).
default
Le curseur par défaut dépendant de la plateforme. Souvent représenté par une flèche.
pointer
Le curseur est un index qui indique un lien.
move
Indique quelque chose qu'on doit déplacer.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indique qu'un certain bord doit être déplacé. Par exemple, le curseur "se-resize" est utilisé pour un mouvement qui commence à partir du coin sud-est de la boîte.
text
Indique que le texte peut être sélectionné. Souvent représenté par une barre en I.
wait
Indique que le programme est occupé. Souvent représenté par une montre ou un sablier.
help
Une aide est disponible pour l'objet en-dessous du curseur. Souvent représenté par un point d'interrogation ou une infobulle.
<uri>
L'agent utilisateur rapporte le curseur contenu dans la ressource désignée par l'URI. Si l'agent utilisateur ne peut pas gérer le premier d'une liste de curseurs, il devra tenter de gérer le deuxième, etc. Si l'agent utilisateur ne peut gérer aucun des curseurs définis par l'utilisateur, il doit utiliser le curseur générique en fin de liste.
P { cursor : url("machose.cur"), url("deuxieme.csr"), text; }

La propriété 'cursor' de SVG est identique à la propriété 'cursor' définie dans la spécification « Les feuilles de style en cascade, niveau 2 » [CSS2 vf.], à la différence que l'agent utilisateur SVG doit gérer les curseurs définis par l'élément 'cursor'.

16.8.3 L'élément 'cursor'

On peut utiliser l'élément 'cursor' pour définir un curseur personnalisé indépendant de la plateforme. Une approche recommandée, pour la définition d'un curseur personnalisé indépendant de la plateforme, consiste à créer une image PNG [PNG01] et à définir un élément 'cursor', qui appelle cette image PNG et identifie la position exacte du pointeur dans l'image (i.e., le point chaud).

On recommande le format PNG parce qu'il peut gérer un masque de transparence via un canal alpha. Si on utilise un format d'image différent, ce format devrait reconnaître la définition d'un masque de transparence (deux options : fournir un canal alpha explicite ou utiliser une couleur de pixel particulière pour indiquer une transparence). Si on peut déterminer un masque de transparence, celui-ci définit la forme du curseur ; sinon, le curseur est un rectangle opaque. Typiquement, les autres informations de pixel (par exemple, les canaux R, G et B) définissent les couleurs des parties du curseur qui ne sont pas masquées. Remarquer que les curseurs contiennent habituellement au moins deux couleurs de manière à ce qu'ils puissent être visibles sur la plupart des arrières-plans.


 
<!ELEMENT cursor (%descTitleMetadata;) >
<!ATTLIST cursor
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #REQUIRED
  %testAttrs;
  externalResourcesRequired %Boolean; #IMPLIED
  x %Coordinate; #IMPLIED
  y %Coordinate; #IMPLIED >

Attribute definitions:

x = "<coordonnée>"
La coordonnée-x de la position, dans le système de coordonnées du curseur, qui représente le point précis visé par le pointage.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
y = "<coordonnée>"
La coordonnée-y de la position, dans le système de coordonnées du curseur, qui représente le point précis visé par le pointage.
Si l'attribut n'est pas spécifié, l'effet produit est comme si une valeur de "0" était spécifiée.
Animable : oui.
xlink:href = "<uri>"
Une référence d'URI vers le fichier ou l'élément qui fournit l'image du curseur.
Animable : oui.

Attributs définis ailleurs :
%stdAttrs;, %testAttrs;, %xlinkRefAttrs;, externalResourcesRequired.

Les agents utilisateurs SVG sont tenus de gérer les images au format PNG désignées par la propriété xlink:href.

16.9 Les interfaces du DOM

Les interfaces suivantes sont définies ci-dessous : SVGCursorElement.


L'interface SVGCursorElement

L'interface SVGCursorElement correspond à l'élément 'cursor'.


IDL Definition
interface SVGCursorElement : 
                SVGElement,
                SVGURIReference,
                SVGTests,
                SVGExternalResourcesRequired { 

  readonly attribute SVGAnimatedLength x;
  readonly attribute SVGAnimatedLength y;
};

attributs
readonly SVGAnimatedLength x
Correspond à l'attribut x sur l'élément 'cursor' donné.
readonly SVGAnimatedLength y
Correspond à l'attribut y sur l'élément 'cursor' donné.