SVG – Learning by Coding

[ dispatchEvent.svg --> Grafik anzeigen ]

 1: <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
 2: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
 3:   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
 4:   <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
 5: ]>
 6: 
 7: <!-- SVG Learning By Coding http://www.datenverdrahten.de/svglbc/ -->
 8: <!--    AuthorDrThomas Meinike 05/03 thomas@handmadecode.de     -->
 9: 
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11:   onload="getSVGDoc(evt)">
12: 
13:   <title>SVG Learning By Coding</title>
14:   <desc>SVG-Spezifikation in Beispielen</desc>
15: 
16:   <defs>
17: 
18:     <script type="text/javascript">
19:       <![CDATA[
20: 
21:       var svgdoc;
22: 
23: 			
24:       function getSVGDoc(load_evt)
25:       {
26:         svgdoc=load_evt.target.ownerDocument;
27:       }
28: 
29: 
30:       function EreignisAusloesen(click_evt)
31:       {
32:         alert("Kreis 5 wurde angeklickt - es folgen die"
33:           +"\nclick-Events der Kreise 1 bis 4 ...");
34: 
35:         svgdoc.getElementById("kreis1").dispatchEvent(click_evt);
36:         svgdoc.getElementById("kreis2").dispatchEvent(click_evt);
37:         svgdoc.getElementById("kreis3").dispatchEvent(click_evt);
38:         svgdoc.getElementById("kreis4").dispatchEvent(click_evt);
39:       }
40: 
41:       ]]>
42:     </script>
43: 
44:   </defs>
45: 
46:   <text x="20" y="30" style="fill: #000; font-size: 24px">
47:     Ereignisse mit dispatchEvent() auslösen</text>
48: 
49:   <circle id="kreis1" cx="90" cy="100" r="30"
50:     style="fill: #000" onclick="alert('Kreis 1')"/>
51:   <circle id="kreis2" cx="160" cy="100" r="30"
52:     style="fill: #00C" onclick="alert('Kreis 2')"/>
53:   <circle id="kreis3" cx="230" cy="100" r="30"
54:     style="fill: #090" onclick="alert('Kreis 3')"/>
55:   <circle id="kreis4" cx="300" cy="100" r="30"
56:     style="fill: #FF0" onclick="alert('Kreis 4')"/>
57: 
58:   <circle id="kreis5" cx="370" cy="100" r="30"
59:     style="fill: #F00" onclick="EreignisAusloesen(evt)">
60:     <set attributeName="stroke" attributeType="CSS" to="#00C" begin="mouseover"/>
61:     <set attributeName="stroke-width" attributeType="CSS" to="2px" begin="mouseover"/>
62:     <set attributeName="stroke" attributeType="CSS" to="none" begin="mouseout"/>
63:   </circle>
64: 
65:   <text x="50" y="180">Die fünf farbigen Kreise reagieren auf
66:     click-EventsDas Anklicken des</text>
67:   <text x="50" y="195">roten Kreises löst zusätzlich
68:     die click-Events der anderen Kreise aus.</text>
69: 
70: </svg>

[zum Anfang]