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 06/04 - 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,svgroot,objekte,anzahl;
35:
36:
37: function Init(load_evt)
38: {
39: svgdoc=load_evt.target.ownerDocument;
40: svgroot=svgdoc.rootElement;
41: svgroot.addEventListener("mouseover",Over,false);
42: svgroot.addEventListener("mouseout",Out,false);
43: objekte=svgdoc.getElementsByTagName("*");
44: anzahl=objekte.length;
45: }
46:
47:
48: function Over(mouseover_evt)
49: {
50: var tgt,curid,testid,obj,i;
51:
52: tgt=mouseover_evt.target;
53:
54: if(tgt.tagName=="circle" || tgt.tagName=="rect" || tgt.tagName=="polygon")
55: {
56: curid=tgt.getAttribute("id");
57: curid=curid.substr(0,curid.indexOf("_")+1);
58: for(i=0;i<anzahl;i++)
59: {
60: obj=objekte.item(i);
61: testid=obj.getAttribute("id");
62: testid=testid.substr(0,testid.indexOf("_")+1);
63: if(testid==curid)obj.setAttribute("opacity","0.3");
64: }
65: }
66: }
67:
68:
69: function Out(mouseout_evt)
70: {
71: var tgt,curid,testid,obj,i;
72:
73: tgt=mouseout_evt.target;
74:
75: if(tgt.tagName=="circle" || tgt.tagName=="rect" || tgt.tagName=="polygon")
76: {
77: curid=tgt.getAttribute("id");
78: curid=curid.substr(0,curid.indexOf("_")+1);
79: for(i=0;i<anzahl;i++)
80: {
81: obj=objekte.item(i);
82: testid=obj.getAttribute("id");
83: testid=testid.substr(0,testid.indexOf("_")+1);
84: if(testid==curid)obj.setAttribute("opacity","1.0");
85: }
86: }
87: }
88:
89: ]]>
90: </script>
91:
92: </defs>
93:
94: <text x="20" y="30" style="fill: #000; font-size: 24px">
95: Elemente über ID-Fragmente gruppieren</text>
96:
97: <text x="20" y="50">Objekte reagieren auf mouseover / mouseout-Events
98: (Änderung der Opazität).</text>
99:
100: <circle id="or_1" cx="50" cy="90" r="10" fill="#F00"/>
101: <circle id="og_1" cx="100" cy="90" r="10" fill="#090"/>
102: <circle id="ob_1" cx="150" cy="90" r="10" fill="#00C"/>
103:
104: <rect id="or_2" x="40" y="130" width="20" height="20" fill="#F00"/>
105: <rect id="og_2" x="90" y="130" width="20" height="20" fill="#090"/>
106: <rect id="ob_2" x="140" y="130" width="20" height="20" fill="#00C"/>
107:
108: <polygon id="or_3" points="40,200 50,180 60,200" fill="#F00"/>
109: <polygon id="og_3" points="90,200 100,180 110,200" fill="#090"/>
110: <polygon id="ob_3" points="140,200 150,180 160,200" fill="#00C"/>
111:
112: <text x="230" y="115">ID-Belegung der Objekte:</text>
113: <text x="230" y="135" fill="#F00">id="or_1" | "or_2" | "or_3"</text>
114: <text x="230" y="155" fill="#090">id="og_1" | "og_2" | "og_3"</text>
115: <text x="230" y="175" fill="#00C">id="ob_1" | "ob_2" | "ob_3"</text>
116:
117: </svg>
[zum Anfang]
