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: <!-- Wuerfelsymbole 1 bis 6 - Beginn -->
19:
20: <symbol id="wuerfel1">
21: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/>
22: <circle cx="30" cy="30" r="5"/>
23: </symbol>
24:
25: <symbol id="wuerfel2">
26: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/>
27: <circle cx="10" cy="10" r="5"/>
28: <circle cx="50" cy="50" r="5"/>
29: </symbol>
30:
31: <symbol id="wuerfel3">
32: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/>
33: <circle cx="10" cy="10" r="5"/>
34: <circle cx="30" cy="30" r="5"/>
35: <circle cx="50" cy="50" r="5"/>
36: </symbol>
37:
38: <symbol id="wuerfel4">
39: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/>
40: <circle cx="10" cy="10" r="5"/>
41: <circle cx="50" cy="10" r="5"/>
42: <circle cx="10" cy="50" r="5"/>
43: <circle cx="50" cy="50" r="5"/>
44: </symbol>
45:
46: <symbol id="wuerfel5">
47: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/>
48: <circle cx="10" cy="10" r="5"/>
49: <circle cx="50" cy="10" r="5"/>
50: <circle cx="30" cy="30" r="5"/>
51: <circle cx="10" cy="50" r="5"/>
52: <circle cx="50" cy="50" r="5"/>
53: </symbol>
54:
55: <symbol id="wuerfel6">
56: <rect x="0" y="0" rx="10" ry="10" width="60" height="60"/>
57: <circle cx="10" cy="10" r="5"/>
58: <circle cx="50" cy="10" r="5"/>
59: <circle cx="10" cy="30" r="5"/>
60: <circle cx="50" cy="30" r="5"/>
61: <circle cx="10" cy="50" r="5"/>
62: <circle cx="50" cy="50" r="5"/>
63: </symbol>
64:
65: <!-- Wuerfelsymbole 1 bis 6 - Ende -->
66:
67:
68: <style type="text/css">
69: <![CDATA[
70:
71: text
72: {
73: font-family: sans-serif;
74: font-size: 12px;
75: }
76:
77: circle
78: {
79: fill: #FFF;
80: }
81:
82: rect
83: {
84: fill: #000;
85: stroke: #000;
86: stroke-width: 2px;
87: }
88:
89: ]]>
90: </style>
91:
92:
93: <script type="text/javascript">
94: <![CDATA[
95:
96: var svgdoc,summe=0,ns="http://www.w3.org/1999/xlink",attr="href";
97:
98:
99: function getSVGDoc(load_evt)
100: {
101: svgdoc=load_evt.target.ownerDocument;
102: }
103:
104:
105: function Zufallszahl(von,bis)
106: {
107: var z;
108:
109: z=Math.floor(von+(bis-von+1)*Math.random());
110: return z;
111: }
112:
113:
114: function Wuerfeln()
115: {
116: var w1,w2,w3,z1,z2,z3;
117:
118: // drei Zufallszahlen zwischen 1 und 6 bestimmen
119: z1=Zufallszahl(1,6);
120: z2=Zufallszahl(1,6);
121: z3=Zufallszahl(1,6);
122:
123: // Augenzahl aufsummieren
124: summe+=z1+z2+z3;
125:
126: // Wuerfel-IDs ermitteln
127: w1="wuerfel"+z1;
128: w2="wuerfel"+z2;
129: w3="wuerfel"+z3;
130:
131: // Augenzahlsumme ausgeben
132: svgdoc.getElementById("summe").firstChild.data=summe;
133:
134: // Wuerfelgrafiken zur Anzeige bringen
135: svgdoc.getElementById("w1").setAttributeNS(ns,attr,"#"+w1);
136: svgdoc.getElementById("w2").setAttributeNS(ns,attr,"#"+w2);
137: svgdoc.getElementById("w3").setAttributeNS(ns,attr,"#"+w3);
138: }
139:
140:
141: function NeuesSpiel()
142: {
143: // den Anfangszustand herstellen
144: summe=0;
145:
146: svgdoc.getElementById("summe").firstChild.data=summe;
147:
148: svgdoc.getElementById("w1").setAttributeNS(ns,attr,"");
149: svgdoc.getElementById("w2").setAttributeNS(ns,attr,"");
150: svgdoc.getElementById("w3").setAttributeNS(ns,attr,"");
151: }
152:
153: ]]>
154: </script>
155:
156: </defs>
157:
158: <text x="20" y="30" style="fill: #000; font-size: 24px">
159: Würfelspiel (Würfel als Symbole definiert)</text>
160:
161: <use id="w1" xlink:href="" x="120" y="80" width="60" height="60"/>
162: <use id="w2" xlink:href="" x="200" y="80" width="60" height="60"/>
163: <use id="w3" xlink:href="" x="280" y="80" width="60" height="60"/>
164:
165: <a xlink:href="" cursor="pointer" onclick="return false">
166: <text x="130" y="180" onclick="Wuerfeln()">Würfeln</text>
167: <set attributeName="fill" attributeType="CSS" to="#00C" begin="mouseover"/>
168: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
169: </a>
170:
171: <text id="summe" x="220" y="180">0</text>
172:
173: <a xlink:href="" cursor="pointer" onclick="return false">
174: <text x="280" y="180" onclick="NeuesSpiel()">Neues Spiel</text>
175: <set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
176: <set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
177: </a>
178:
179: </svg>
[zum Anfang]
