SVG – Learning by Coding

[ rotate_rect.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 06/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:     <script type="text/javascript">
19:       <![CDATA[
20: 
21:       var svgdoc,b=0,e=0,r=0;
22: 
23: 			
24:       function getSVGDoc(load_evt)
25:       {
26:         svgdoc=load_evt.target.ownerDocument;
27:       }
28: 
29: 
30:       function ZaehleBegin(begin_evt)
31:       {
32:         b++;
33:         svgdoc.getElementById("b").firstChild.data=b;
34:       }
35: 
36: 
37:       function ZaehleEnd(end_evt)
38:       {
39:         e++;
40:         svgdoc.getElementById("e").firstChild.data=e;
41:       }
42: 
43: 
44:       function ZaehleRepeat(repeat_evt)
45:       {
46:         r++;
47:         svgdoc.getElementById("r").firstChild.data=r;
48:       }
49: 
50:       ]]>
51:     </script>
52: 
53:   </defs>
54: 
55:   <text x="20" y="30" style="fill: #000; font-size: 24px">Rotierendes Rechteck</text>
56: 
57:   <rect x="100" y="100" width="80" height="40" style="fill: #00C"/>
58: 
59:   <rect x="100" y="100" width="80" height="40"
60:     style="fill: #FF0; stroke: #000; stroke-width: 1px">
61: 
62:     <animateTransform attributeName="transform" attributeType="XML" type="rotate"
63:       from="0,140,120" to="360,140,120" begin="2s" dur="1.5s" repeatCount="10"
64:       onbegin="ZaehleBegin()" onend="ZaehleEnd()" onrepeat="ZaehleRepeat()"/>
65: 
66:   </rect>
67: 
68:   <circle cx="139" cy="119" r="1" style="fill: #F00"/>
69: 
70:   <text x="70" y="180">begin: <tspan id="b">0</tspan> |
71:     end: <tspan id="e">0</tspan> | repeat: <tspan id="r">0</tspan></text>
72: 
73: </svg>

[zum Anfang]