SVG – Learning by Coding
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: <!-- Author: Dr. Thomas Meinike 01/05 - thomas@handmadecode.de -->
9:
10: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
11: onload="Init(evt)">
12:
13: <title>SVG - Learning by Coding</title>
14: <desc>SVG-Spezifikation in Beispielen</desc>
15:
16: <defs>
17:
18: <style type="text/css">
19: <![CDATA[
20:
21: *
22: {
23: font-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: ]]>
28: </style>
29:
30:
31: <script type="text/javascript">
32: <![CDATA[
33:
34: var svgdoc,svgobj,check=false;
35:
36:
37: function Init(load_evt)
38: {
39: svgdoc=load_evt.target.ownerDocument;
40: svgobj=svgdoc.getElementById("zielkreis");
41: }
42:
43:
44: function NewEvent(click_evt)
45: {
46: var newevt;
47:
48: // DOM-Theorie
49: /*
50: newevt=svgdoc.createEvent("MouseEvents");
51: newevt.initMouseEvent(
52: "click",true,true,svgdoc,1,0,0,0,0,false,false,false,false,0,null);
53:
54: // initMouseEvent-Argumente:
55: // typeArg,canBubbleArg,cancelableArg,viewArg,detailArg,screenXArg,
56: // screenYArg,clientXArg,clientYArg,ctrlKeyArg,altKeyArg,shiftKeyArg,
57: // metaKeyArg,buttonArg,relatedTargetArg
58:
59: check=svgobj.dispatchEvent(newevt);
60: if(check)alert("click-Event wurde erzeugt und ausgelöst.");
61: */
62:
63: // ASV6-Praxis
64: var ver=getSVGViewerVersion();
65: if(ver.indexOf("Adobe")!=-1 && ver.indexOf("6.0")!=-1)
66: {
67: newevt=svgdoc.createEvent("click");
68: alert(newevt+" : "+newevt.type); // [object CustomEvent] : click
69: check=svgobj.dispatchEvent(newevt);
70: if(check)alert("click-Event wurde erzeugt und ausgelöst.");
71: }
72: else alert("createEvent() funktioniert nur mit dem ASV 6.0!");
73: }
74:
75:
76: function TestFunc()
77: {
78: svgobj.setAttribute("fill","#FF0");
79: }
80:
81: ]]>
82: </script>
83:
84: </defs>
85:
86: <text x="20" y="30" style="fill: #000; font-size: 24px">
87: Ereignisse mit createEvent() erzeugen [ASV 6.0]</text>
88:
89: <circle cx="120" cy="90" r="20" fill="#F00" onclick="NewEvent(evt)"/>
90: <circle id="zielkreis" cx="220" cy="90" r="20" fill="#090" onclick="TestFunc()"/>
91:
92: <text x="20" y="140">
93: <tspan x="20" dy="1.2em">
94: Anklicken des roten Kreises erzeugt neues click-Ereignis,</tspan>
95: <tspan x="20" dy="1.2em">
96: welches die für den grünen Kreis definierte Funktion</tspan>
97: <tspan x="20" dy="1.2em">
98: mittels dispatchEvent() aufruft [Füllfarbe wird gelb].</tspan>
99: </text>
100:
101: </svg>
[zum Anfang]