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 03/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: <style type="text/css">
19: <![CDATA[
20:
21: *
22: {
23: font-family: sans-serif;
24: font-size: 12px;
25: }
26:
27: .gelb
28: {
29: fill: #FF0;
30: }
31:
32: .rot
33: {
34: fill: #F00;
35: }
36:
37: .gruen
38: {
39: fill: #090;
40: }
41:
42: .blau
43: {
44: fill: #00C;
45: }
46:
47: ]]>
48: </style>
49:
50: <script type="text/javascript">
51: <![CDATA[
52:
53: var svgdoc,svgroot;
54:
55:
56: function getSVGDoc(load_evt)
57: {
58: svgdoc=load_evt.target.ownerDocument;
59: svgroot=svgdoc.documentElement;
60: }
61:
62:
63: function KlassenTauschen(klasse_alt,klasse_neu)
64: {
65: var obj=getElementsByClassName(klasse_alt);
66:
67: for(i=0;i<obj.length;i++)
68: {
69: obj[i].setAttribute("class",klasse_neu);
70: }
71: }
72:
73:
74: function getElementsByClassName(class_name)
75: {
76: var inp_obj,ret_obj=new Array(),j=0,akt_class="",test_str="";
77:
78: inp_obj=svgroot.getElementsByTagName("*");
79: for(i=0;i<inp_obj.length;i++)
80: {
81: akt_class=inp_obj.item(i).getAttribute("class");
82: if(!akt_class)akt_class="";
83: if(akt_class.indexOf(class_name)!=-1)
84: {
85: teststr=","+akt_class.split(" ").join(",")+",";
86: if(teststr.indexOf(","+class_name+",")!=-1)
87: {
88: ret_obj[j]=inp_obj.item(i);
89: j++;
90: }
91: }
92: }
93: return ret_obj;
94: }
95:
96: ]]>
97: </script>
98:
99: </defs>
100:
101: <text x="20" y="30" style="fill: #000; font-size: 24px">
102: CSS-Klassen tauschen</text>
103:
104: <circle class="rot" cx="80" cy="80" r="20"/>
105: <circle class="blau" cx="140" cy="80" r="20"/>
106: <circle class="rot" cx="200" cy="80" r="20"/>
107:
108: <circle class="blau" cx="80" cy="140" r="20"/>
109: <circle class="blau" cx="140" cy="140" r="20"/>
110: <circle class="blau" cx="200" cy="140" r="20"/>
111:
112: <circle class="rot" cx="80" cy="200" r="20"/>
113: <circle class="blau" cx="140" cy="200" r="20"/>
114: <circle class="rot" cx="200" cy="200" r="20"/>
115:
116: <a xlink:href="" cursor="pointer" onclick="return false">
117: <text x="70" y="260" onclick="KlassenTauschen('rot','gruen');KlassenTauschen('blau','gelb')">
118: rot –› grün + blau –› gelb
119: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
120: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
121: </text>
122: </a>
123:
124: <a xlink:href="" cursor="pointer" onclick="return false">
125: <text x="70" y="280" onclick="KlassenTauschen('gruen','rot');KlassenTauschen('gelb','blau')">
126: grün –› rot + gelb –› blau
127: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
128: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
129: </text>
130: </a>
131:
132: </svg>
[zum Anfang]
