Introduction
Troisième volet de notre série sur SVG, cet article a pour objectif la présentation, au travers d'un exemple, des possibilités d'inclusion de scripts au sein d'un document SVG.
Nous allons ainsi réaliser une glissière horizontale permettant d'interagir sur la taille d'un texte. Le résultat final peut être visualisé sur cette page (si vous n'observez pas l'animation SVG, téléchargez le fichier en local).

La partie statique
Commençons par réaliser graphiquement notre glissière: celle-ci comprendra notamment un curseur que nous ferons "coulisser" à l'aide de la souris.

<g id="glissiere" transform="translate(150 475)">
 <rect x="0" y="0" width="200" height="15" style="fill:#CCCCCC" />
 <line style="stroke: #000000; stroke-width: 2;" x1="5" y1="6" x2="195" y2="6" />
 <line style="stroke: #FFFFFF; stroke-width: 2;" x1="5" y1="9" x2="195" y2="9" />
 <g id="curseur" transform="translate(0 0)">
  <path style="stroke: none; fill: #000000;" d="M1,3l8,0l-4,10Z" />
 </g>
</g>

Nous utilisons pour cela des formes élémentaires (rectangle, ligne) ainsi qu'un élément "path" (pour le dessin du curseur), sur lesquels nous ne revenons pas (voir le premier volet de cette série).
Nous "groupons" ces éléments en deux ensembles (le second étant imbriqué dans le premier) à l'aide de l'élément "g". Nous attribuons l'identifiant "glissiere" au premier, qui comprend le dessin de la coulisse et du curseur, et l'identifiant "curseur" au dessin du curseur.
Notre glissière sera située aux coordonnées (150, 475) du coin supérieur gauche de notre fenêtre (dont nous choisirons plus loin 500x500 pour la taille, l'unité étant le pixel).

Ensuite, nous spécifions la figure (ici, un texte) que nous ferons évoluer (ici, grandir) à l'aide de la glissière:

<text id="figure" font-size="10" transform="translate(150,250)">SVG</text>

Nous ne revenons pas sur la syntaxe (voir le deuxième volet de cette série). Nous plaçons notre texte aux coordonnées (150,250) du coin supérieur gauche de notre fenêtre. Nous attribuons l'identifiant "figure" à cet élément.

La partie "script"
Nous allons définir deux fonctions JavaScript, la première nous servira à identifier l'événement "passage de souris", et lui associer la seconde fonction. Cette dernière, donc, spécifiera le déplacement du curseur le long de la glissière.
Nous avons besoin, tout d'abord, de trois variables globales destinées à repérer les différents éléments identifiés de notre document SVG, et que nous initialisons à "null".

var glissiere=null, curseur=null, figure=null;

La fonction d'identification de l'événement "passage de souris", que nous appellons identifier() sera appelée dès le chargement du document SVG, en écrivant:

<svg width="500" height="500" onload="identifier(evt)">

où evt est variable renvoyée quand le "dessin SVG" a le "focus".

La fonction ressemblera alors à:

function identifier(evenement) {
 doc = evenement.getTarget().getOwnerDocument();
 if (doc != null) {
  glissiere = doc.getElementById("glissiere");
  curseur = doc.getElementById("curseur");
  figure = doc.getElementById("figure");
  glissiere.addEventListener("mousemove", deplacement, false);
 }
}

Nous reperons d'abord le document concerné (première ligne de la fonction), puis nous associons à nos variables globales les éléments identifiés correspondants de l'arborescence SVG, et enfin, nous associons un comportement précis (l'appel à la fonction "deplacement()", qui sera notre seconde fonction - voir plus bas) à un événement particulier (l'évenement "mousemove", repérant la passage de la souris) pour un élément unique (l'élément dont l'identifiant est "glissiere").

La fonction "deplacement()" sera alors la suivante:

function deplacement(evenementt) {
 var valeur = evenement.getClientX() - 155;
 if (valeur > 0 && valeur < 190) {
  curseur.setAttribute("transform", "translate(" + (valeur) + " 0)");
  figure.setAttribute("font-size", 10+valeur/2);
 }
}

Si l'abscisse du curseur de la souris est comprise entre 155 et 345 (qui correspondent aux positions extrêmes du curseur sur la glissière), alors nous déplaçons le curseur le long de la glissière, d'une part, et nous changeons la taille de la police de caractère du texte "figure", d'autre part (en respectant la proportionnalité entre la position du curseur sur la glissière et la taille).
Pour ces deux opérations, nous utilisons la fonction "setAttribute()" qui permet de modifier la valeur d'un attribut d'un élément du document manipulé.

Le document SVG final est donc le suivant:

<?xml version="1.0" encoding="iso-8859-1"?>
<svg width="500" height="500" onload="identifier(evt)">
<g id="glissiere" transform="translate(150 475)">
 <rect x="0" y="0" width="200" height="15" style="fill:#CCCCCC" />
 <line style="stroke: #000000; stroke-width: 2;" x1="5" y1="6" x2="195" y2="6" />
 <line style="stroke: #FFFFFF; stroke-width: 2;" x1="5" y1="9" x2="195" y2="9" />
 <g id="curseur" transform="translate(0 0)">
  <path style="stroke: none; fill: #000000;" d="M1,3l8,0l-4,10Z" />
 </g>
</g>
<text id="figure" font-size="10" transform="translate(150,250)">SVG</text>
<script><![CDATA[
var glissiere=null, curseur=null, figure=null;
function deplacement(evenement) {
 var valeur = evenement.getClientX() - 155;
 if (valeur > 0 && valeur < 190) {
  curseur.setAttribute("transform", "translate(" + (valeur) + " 0)");
  figure.setAttribute("font-size", 10+valeur/2);
 }
}
function identifier(evenement) {
 doc = evenement.getTarget().getOwnerDocument();
 if (doc != null) {
  glissiere = doc.getElementById("glissiere");
  curseur = doc.getElementById("curseur");
  figure = doc.getElementById("figure");
  glissiere.addEventListener("mousemove", deplacement, false);
 }
}
]]></script>
</svg>

Notez l'inclusion du script en spécifiant bien qu'il s'agit de caractères qui ne doivent pas être analysés syntaxiquement par le "parseur" SVG (utilisation de CDATA, qui signifie Character DATA).