SVG – Learning by Coding

[ wuerfelspiel.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 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-familysans-serif;
 74:         font-size12px;
 75:       }
 76: 
 77:       circle
 78:       {
 79:         fill#FFF;
 80:       }
 81: 
 82:       rect
 83:       {
 84:         fill#000;
 85:         stroke#000;
 86:         stroke-width2px;
 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]