L'attribut contentScriptType sur l'élément 'svg' spécifie le langage de script par défaut du fragment de document donné.
Il est également possible de spécifier le langage de script pour chaque élément individuel 'script' en spécifiant un attribut type attribute sur l'élément 'script'.
Un élément 'script' équivaut à l'élément 'script' en HTML, c'est ainsi un endroit pour placer des scripts (par exemple, ECMAScript). Toutes les fonctions définies dans un élément 'script' ont une portée « globale » à travers le document courant entier.
L'exemple script01 définit une fonction circle_click qui est
appelée par l'attribut d'événement onclick sur l'élément
'circle'.
Ci-dessous, le dessin de gauche est l'image initiale, celui de droite montre le résultat après un clic sur
le cercle.
Remarquer que cette exemple démontre l'emploi de l'attribut d'événement onclick dans un but d'explication. L'exemple présuppose la présence d'un appareil pour l'entrée qui a les mêmes caractéristiques comportementales qu'une souris, ce qui n'est pas toujours le cas. Pour tenir compte du plus grand nombre d'utilisateurs, on devrait utiliser l'attribut d'événement onactivate plutôt que l'attribut onclick.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="6cm" height="5cm" viewBox="0 0 600 500"
xmlns="http://www.w3.org/2000/svg">
<desc>Exemple script01 - invoque une fonction ECMAScript à partir d'un événement onclick
</desc>
<!-- Fonction ECMAScript qui change le rayon à chaque clic -->
<script type="text/ecmascript"> <![CDATA[
function circle_click(evt) {
var circle = evt.target;
var currentRadius = circle.getAttribute("r");
if (currentRadius == 100)
circle.setAttribute("r", currentRadius*2);
else
circle.setAttribute("r", currentRadius*0.5);
}
]]> </script>
<!-- Contour en bleu de l'aire du dessin -->
<rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
<!-- S'exécute à chaque clic -->
<circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
fill="red"/>
<text x="300" y="480"
font-family="Verdana" font-size="32" text-anchor="middle">
Cliquer sur le cercle change sa taille
</text>
</svg>
|
|
Voir cet exemple en SVG (seulement avec navigateur gérant SVG)
<!ELEMENT script (#PCDATA) > <!ATTLIST script %stdAttrs; %xlinkRefAttrs; xlink:href %URI; #IMPLIED externalResourcesRequired %Boolean; #IMPLIED type %ContentType; #REQUIRED > |
Définitions des attributs :
Les événements peuvent entraîner l'exécution de scripts quand l'un ou l'autre des suivants survient :
Les sections de la spécification en relation :
Les attributs d'événement suivants sont disponibles pour de nombreux éléments SVG.
La liste complète des événements, qui font partie du langage SVG et du DOM SVG, ainsi que leur description est donnée dans la section La liste complète des événements reconnus.
<!ENTITY % graphicsElementEvents "onfocusin %Script; #IMPLIED onfocusout %Script; #IMPLIED onactivate %Script; #IMPLIED onclick %Script; #IMPLIED onmousedown %Script; #IMPLIED onmouseup %Script; #IMPLIED onmouseover %Script; #IMPLIED onmousemove %Script; #IMPLIED onmouseout %Script; #IMPLIED onload %Script; #IMPLIED" > |
<!ENTITY % documentEvents "onunload %Script; #IMPLIED onabort %Script; #IMPLIED onerror %Script; #IMPLIED onresize %Script; #IMPLIED onscroll %Script; #IMPLIED onzoom %Script; #IMPLIED" > |
<!ENTITY % animationEvents "onbegin %Script; #IMPLIED onend %Script; #IMPLIED onrepeat %Script; #IMPLIED" > |
Animable : non.
Les interfaces suivantes sont définies ci-dessous : SVGScriptElement, SVGEvent, SVGZoomEvent.
L'interface SVGScriptElement correspond à l'élément 'script'.
interface SVGScriptElement :
SVGElement,
SVGURIReference,
SVGExternalResourcesRequired {
attribute DOMString type;
// raises DOMException on setting
};
| DOMException |
NO_MODIFICATION_ALLOWED_ERR : déclenchée lors d'une tentative de modifier la valeur d'un attribut en lecture seule.
|
Le jeu d'événements SVG contient une liste des types d'événement spéciaux qui sont disponibles en SVG.
Un utilisateur du DOM peut utiliser la méthode hasFeature de l'interface DOMImplementation pour déterminer si le jeu des événements SVG est reconnu par une implémentation du DOM. La chaîne représentative pour ce jeu d'événements est "SVGEvents". On utilise aussi cette chaîne avec la méthode createEvent.
Les événements SVG s'appuient sur l'interface DOMEvent de base pour la transmission d'informations contextuelles.
Les différents types de ces événements pouvant survenir sont :
interface SVGEvent : events::Event {};
Un utilisateur du DOM peut utiliser la méthode hasFeature de l'interface DOMImplementation pour déterminer si le jeu événement de zoom SVG est reconnu par une implémentation DOM. La chaîne représentative pour ce jeu est "SVGZoomEvents". On utilise aussi cette chaîne avec la méthode createEvent.
Le gestionnaire de l'événement de zoom intervient avant que l'événement de zoom ne soit traité. Le reste du DOM représente l'état précédent du document. Le document sera réinitialisé lors du retour normal depuis le gestionnaire d'événement.
Le type d'événement de l'interface utilisateur pour un événement de zoom est :
interface SVGZoomEvent : events::UIEvent {
readonly attribute SVGRect zoomRectScreen;
readonly attribute float previousScale;
readonly attribute SVGPoint previousTranslate;
readonly attribute float newScale;
readonly attribute SVGPoint newTranslate;
};
Le rectangle de zoom spécifié en unités de l'écran.
L'objet en question et son contenu sont tous deux en lecture seule.
Les valeurs de translation de l'opération de zoom précédente qui était en vigueur avant que l'opération de zoom ne survienne.
L'objet en question et son contenu sont tous deux en lecture seule.
Les valeurs de translation qui seront en vigueur après que l'opération de zoom a été réalisée.
L'objet en question et son contenu sont tous deux en lecture seule.