function circle_click(evt ) {
var circle = evt.target;
var currentRadius = circle.getAttribute("r") ;
....
<circle onclick="circle_click(evt) " cx="300" cy="225" r="100" fill="red"/>
<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>
<rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
<!-- S'execute a 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>
<circle onclick="circle_click(evt) " cx="300" cy="225" r="100" fill="red"/>
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) ;
facile, non ? (ce genre de choses se fait aussi en X3D, en HTML et en VRML)
<script type="text/ecmascript">
<![CDATA[
function circle_click(evt ) {
..... }
]]>
</script>
<svg
<script type="text/ecmascript"> <![CDATA[
// variables globales qu'on utilise dans toutes les fonctions
var svgdoc , eye_right, ...... ;
function init (big_bang) {
svgdoc = big_bang.target.ownerDocument; // instance of the document
..... }
<svg onload="init(evt) ">
<desc> Ici on insère la véritable scène SVG </desc>
</svg>
</svg>
// set to 0 in production, 1 for things to debug, 2 for things fixed
var debug = 1;
if (debug==2) alert ("The document did load nicely, global variables are defined");
}
....
// affiche un string plus une représentation d'un objet
if (debug==1) alert ("button =" + currentButton);
... sans ce genre de stratégie vous allez souffrir, car il est facile de mal interpréter les spécifications du DOM ....
svgdoc = big_bang.target.ownerDocument;// instance of the document
eye_right = svgdoc.getElementById ("eyeRightId"); // getElementById()
<script type="text/ecmascript"> <![CDATA[
function infos(evt) {
var element = evt.target ; XML DOM
el_name = element.nodeName ; // XML DOM2
el_attributes = element.attributes; // XML DOM2
circle_size = element.getAttribute("r") // XML DOM2
display_text = "Element name = " + el_name;
display_text += " \nAttributes = " + el_attributes;
display_text += " \nCircle size = " + circle_size;
alert(display_text);
element.setAttribute ("fill", "yellow"); //XML DOM2
}
]]> </script>
<!-- S'exécute a chaque clic -->
<circle onclick="infos(evt)" cx="300" cy="225" r="100" fill="red"/>
<path
id="eyeLeftId" fill = "#00ff00"
style="fill-opacity:1;stroke:#000000;stroke-width:2.0000000;stroke-miterlimit:4.0000000;stroke-opacity:1.0000000"
transform="translate(-284.0000,-122.0000)"
d="M 492.00000,311.00000 C 492.00000,330.32997 475.43454,346.00000 455.00000,346.00000 C 434.56546,346.00000 418.00000,330.32997 418.00000,311.00000 C 418.00000,291.67003 434.56546,276.00000 455.00000,276.00000 C 475.43454,276.00000 492.00000,291.67003 492.00000,311.00000 L 492.00000,311.00000 z " />
<path
id="angry" visibility="hidden"
style="fill:none;fill-opacity:0.75000000;fill-rule:evenodd;stroke:#000000;stroke-width:14.173228;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4.0000000;stroke-opacity:1.0000000"
d="M 139.22652,280.11050 L 339.77901,278.45304" />
<rect
onclick="button_click(evt)"
id="rect1333"
style="fill:#ff0000;fill-opacity:1;stroke-width:14.173228"
y="197.23756"
x="474.03317"
height="79.558014"
width="77.900551" />
// variables globales qu'on utilise dans les 2 fonctions
var svgdoc, eye_right, eye_left, mouth_angry, mouth_happy, mouth_sad ;
function init (big_bang) {
svgdoc = big_bang.target.ownerDocument; // instance of the document
eye_right = svgdoc.getElementById("eyeRightId"); // getElementById()
eye_left = svgdoc.getElementById("eyeLeftId");
mouth_angry = svgdoc.getElementById("angry");
mouth_happy = svgdoc.getElementById("path1363");
mouth_sad = svgdoc.getElementById("path2168");
}
function button_click(evt) {
var button = evt.target;
var currentButton = button.getAttribute("id");
if (currentButton == "blue_button") {
face_change ("blue", mouth_happy );
}
else if (currentButton == "rect1333") {
face_change ("red", mouth_angry);
}
else {
face_change ("black", mouth_sad);
} }
var button = evt.target;
var currentButton = button.getAttribute("id") ;
face_change ("black", mouth_sad);
function face_change(eye_color, emotion) {
eye_left.setAttribute ("fill", eye_color);
eye_right.setAttribute("fill", eye_color);
if (debug==2) alert ("mouth emotion =" + emotion);
switch (emotion) {
case mouth_angry:
mouth_angry.setAttribute ("visibility","visible");
mouth_happy.setAttribute ("visibility","hidden");
mouth_sad.setAttribute ("visibility","hidden");
break;
case mouth_happy:
mouth_angry.setAttribute ("visibility","hidden");
mouth_happy.setAttribute ("visibility","visible");
mouth_sad.setAttribute ("visibility","hidden");
break;
case mouth_sad:
mouth_angry.setAttribute ("visibility","hidden");
mouth_happy.setAttribute ("visibility","hidden");
mouth_sad.setAttribute ("visibility","visible");
break;
}
}