Le scripting
Sources :
http://www.w3.org/TR/SVG/script.html
http://www.w3.org/2002/Talks/0328-Amsterdam-IH/SVGDOM2slide.svgz
http://pilat.free.fr/routines/js_dom.htm
Livre SVG essential.O'Reilly
Création de graphique svg
intéractif :
On peut écrire des scripts pour rendre intéractif les graphiques SVG.
Le langage le plus utilisé est Javascript (ou ECMA Script qui veut dire
"the European Computer Manufacturer's Association standard version of
Javascript).
L'interaction a lieu quand les objets du graphique répondent à des évènements.
Les évènements
Les objets peuvent répondre :
- à des évènements liés à la souris qui peuvent être :
- cliquer :
click, mousedown, mouseup.
- bouger la souris : mouseover,
mouseout, mousemove
- à des évènements associés au statut d'un objet :
- à des évènements non standardisés associés à des touches
du clavier : keydown, keyup.
Pour permettre à un objet de
répondre à un évènement on lui ajoute un attribut de la forme suivante : oneventName.
La valeur de cet attribut sera générallement l'appel d'une fonction javascript.
Source du fichier SVG :
<!DOCTYPE svg PUBLIC
"-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="250" viewBox="0 0 400
250"
onload="init(evt)">
<script type="text/ecmascript">
<![CDATA[
var scaleChoice = 1;
var scaleFactor = new Array( 1.25, 1.5, 1.75 );
function init( evt )
{transformShirt();}
function setScale( n )
{
obj = svgDocument.getElementById( "scale" + scaleChoice );
obj.setAttribute( "fill", "white" );
scaleChoice = n;
obj = svgDocument.getElementById( "scale" + scaleChoice );
obj.setAttribute( "fill", "#ffc" );
transformShirt();
}
function transformShirt( )
{
var obj = svgDocument.getElementById( "shirt" );
obj.setAttribute( "transform","scale(" +
scaleFactor[scaleChoice] + ")");
obj.setAttribute( "stroke-width",1 / scaleFactor[scaleChoice] );
}
// ]]>
</script>
<defs>
<path id="shirt"
d="M -6 -30, -32 -19, -25.5 -13, -22 -14, -22 30, 23 30,
23 -14, 26.5 -13, 33 -19, 7 -30
A 6.5 6 0 0 1 -6 -30"
fill="white" stroke="black"/>
</defs>
<use xlink:href="#shirt" x="150" y="150"/>
<g onclick="setScale(0)">
<rect id="scale0" x="100" y="10"
width="30" height="30"
fill="white" stroke="black"/>
<text x="115" y="30"
text-anchor="middle">S</text>
</g>
<g onclick="setScale(1)">
<rect id="scale1" x="140" y="10"
width="30" height="30"
fill="#ffc" stroke="black"/>
<text x="155" y="30"
text-anchor="middle">M</text>
</g>
<g onclick="setScale(2)">
<rect id="scale2" x="180" y="10"
width="30" height="30"
fill="white" stroke="black"/>
<text x="195" y="30"
text-anchor="middle">L</text>
</g>
</svg>
Exemples de menus déroulants, etc
Cliquer sur le bouton droit de la souris et exploiter le menu
Source du fichier SVG :
<svg width="400"
height="300" onmousemove="init(evt)">
<defs>
<menu id="menu1" >
<header>Menu utilisateur</header>
<item action="ZoomIn">Zoom</item>
<item id="clone" action="OriginalView">Vue
originale</item>
<item/>
<item onactivate="clone_objet(evt)">Cloner</item>
<menu>
<header>Colorier</header>
<item onactivate="colorier(evt,'green')">Vert</item>
<item onactivate="colorier(evt,'red')">Rouge</item>
<item onactivate="colorier(evt,'blue')">Bleu</item>
<item onactivate="colorier(evt,'yellow')">Jaune</item>
</menu>
<item/>
<item action="SaveSnapshotAs">Sauver SVG</item>
<item action="ViewSource">Voir le source</item>
<item onactivate="aide(evt)">Aide</item>
</menu>
<menu id="menu0" >
<item action="ZoomIn">Zoom</item>
<item id="clone" action="OriginalView">Vue
originale</item>
<item/>
<menu>
<header>Colorier</header>
<item onactivate="colorier(evt,'green')">Vert</item>
<item onactivate="colorier(evt,'red')">Rouge</item>
<item onactivate="colorier(evt,'blue')">Bleu</item>
<item onactivate="colorier(evt,'yellow')">Jaune</item>
</menu>
<item/>
<item action="SaveSnapshotAs">Sauver SVG</item>
<item action="ViewSource">Voir le source</item>
<item onactivate="aide(evt)">Aide</item>
</menu>
<menu id="menu2" >
<header>Menu utilisateur</header>
<item action="ZoomIn">Zoom</item>
<item id="clone" action="OriginalView">Vue
originale</item>
<item/>
<menu>
<header>Colorier</header>
<item onactivate="colorier(evt,'green')">Vert</item>
<item onactivate="colorier(evt,'red')">Rouge</item>
<item onactivate="colorier(evt,'blue')">Bleu</item>
<item onactivate="colorier(evt,'yellow')">Jaune</item>
</menu>
<menu>
<header>Police</header>
<item onactivate="police(evt,'Arial')">Arial</item>
<item onactivate="police(evt,'Times New Roman')">Times New
Roman</item>
<item onactivate="police(evt,'Tahoma')">Tahoma</item>
<item onactivate="police(evt,'Verdana')">Verdana</item>
</menu>
<item/>
<item action="SaveSnapshotAs">Sauver SVG</item>
<item action="ViewSource">Voir le source</item>
<item onactivate="aide(evt)">Aide</item>
</menu>
</defs>
<script><![CDATA[
var n=0;
var svgdoc="";
var cible,XPos,YPos;
function init(evt)
{svgdoc=evt.getTarget().getOwnerDocument();
cible=evt.getTarget();XPos=evt.getClientX();YPos=evt.getClientY()}
function faire_menus(nom_menu)
{var
newMenuRoot=parseXML(printNode(document.getElementById(nom_menu)),contextMenu);
contextMenu.replaceChild(newMenuRoot,contextMenu.firstChild)}
function aide()
{alert("Testez le menu contextuel\nqui varie suivant l'objet\nsur lequel
vous cliquez\navec le bouton droit")}
function clone_objet(evt)
{n=n+1;
objet=svgdoc.getElementById("rectangle");
var newnode = objet.cloneNode(true);
newnode.setAttribute ("x",100+10*n);newnode.setAttribute
("y",100+10*n);
newnode.getStyle().setProperty("fill","blue");
var contents = svgdoc.getElementById ('affiche');
newnode = contents.appendChild (newnode)}
function colorier(evt,couleur)
{cible.getStyle().setProperty("fill",couleur)}
function police(evt,fonte)
{cible.getStyle().setProperty("font-family",fonte)}
]]></script>
<rect x="0" y="0" width="400"
height="300" onmousemove="faire_menus('menu0')"
style="fill:white;opacity:0.2"/>
<g id="affiche">
<text id="texte" onmousemove="faire_menus('menu2')"
x="200" y="40" style="text-anchor:middle;font-size:15;font-family:Arial;fill:red">Testez
le menu contextuel (bouton droit)</text>
<rect id="rectangle" onmousemove="faire_menus('menu1')"
onclick="clone_objet(evt)" x="50" y="50"
width="100" height="50" style="fill:green"/>
</g>
</svg>
Cliquer sur le rectangle et choisissez la
couleur de remplissage!
Exemple
avec une animation :
<svg width="300" height="150" viewBox="0 0 300 150" onload="init(evt)"> <script type="text/ecmascript"> <![CDATA[ function init( evt ) { /* initialization code goes here */ } function setMessage( visStatus ) { var message = svgDocument.getElementById( "message" ); message.setAttribute( "visibility", visStatus ); } // ]]> </script> <g id="button"> <rect x="10" y="10" width="40" height="20" rx="4" ry="4" style="fill: #ddd;"/> <text x="30" y="25" style="text-anchor: middle;">Start</text> </g> <text id="message" x="60" y="25" visibility="hidden"> Animation in progress. </text> <g transform="translate(100, 60)"> <path d="M-25 -15, 0 -15, 25 15, -25 15 Z" style="stroke: gray; fill: #699;"> <animateTransform id="trapezoid" attributeName="transform" type="rotate" from="0" to="360" begin="button.click" dur="6s" onbegin="setMessage('visible')" onend="setMessage('hidden')"/> </path> </g> </svg>
|
http://tecfa.unige.ch/staf/staf-g/sierra/staf2x/scripting/exsimpleanimscript.svg
Exercice : prenez votre animation du matin et faites
apparaître le texte « mon animation ! » quand l’animation a
lieu.
