SVG – Learning by Coding

[ baseVal_animVal.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/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-familysans-serif;
24:         font-size12px;
25:       }
26: 
27:       ]]>
28:     </style>
29: 
30: 
31:     <script type="text/javascript">
32:       <![CDATA[
33: 
34:         var svgdoc,circleobj,lineobj,textobj,timer;
35: 
36: 
37:         function Init(load_evt)
38:         {
39:           // Objekte vordefinieren
40:           svgdoc=load_evt.target.ownerDocument;
41:           circleobj=svgdoc.getElementById("kreis");
42:           lineobj=svgdoc.getElementById("linie");
43:           textobj=svgdoc.getElementById("cxout");
44: 
45:           // baseVal-Wert des Kreis-Attributes cx abfragen und anzeigen (Text)
46:           if(circleobj.cx && circleobj.cx.baseVal)
47:           textobj.firstChild.setData("cx="+circleobj.cx.baseVal.value);
48:           else alert("Eigenschaft 'baseVal' existiert nicht!");
49:         }
50: 
51: 
52:         function AnimControl()
53:         {
54:           // animVal-Wert des Kreis-Attributes cx abfragen und anzeigen (Text+Linie)
55:           textobj.firstChild.setData("cx="+Math.round(circleobj.cx.animVal.value));
56:           lineobj.setAttribute('x2',circleobj.cx.animVal.value);
57:         }
58: 
59: 
60:         function AnimBegin()
61:         {
62:           // Timer-Intervall zum Aufruf der Funktion AnimControl() auf 100ms setzen
63:           if(circleobj.cx && circleobj.cx.animVal)
64:             timer=setInterval("AnimControl()",100);
65:           else alert("Eigenschaft 'animVal' existiert nicht!");
66:         }
67: 
68: 
69:         function AnimEnd()
70:         {
71:           // Timer entfernen
72:           if(timer)clearInterval(timer);
73:         }
74: 
75:       ]]>
76:     </script>
77: 
78:   </defs>
79: 
80:   <text x="20" y="30" style="fill: #000; font-size: 24px">
81:     Werte baseVal und animVal abfragen</text>
82:   <text x="20" y="50">Funktioniert mit ASV 6.0aber nicht mit ASV 3.01.</text>
83: 
84:   <circle cx="100" cy="100" r="30"
85:     style="fill: #FF0; stroke: #00C; stroke-dasharray: 5,5"/>
86: 
87:   <circle id="kreis" cx="100" cy="100" r="30" style="fill: #FF0; stroke: #00C">
88:     <animate attributeName="cx" attributeType="XML" from="100" to="400" dur="20s"
89:       fill="freeze" begin="click" onbegin="AnimBegin()" onend="AnimEnd()"/>
90:   </circle>
91: 
92:   <line id="linie" x1="100" y1="100" x2="100" y2="100" style="stroke: #F00"/>
93: 
94:   <text id="cxout" x="20" y="105" style="fill: #F00">cx=???</text>
95: 
96:   <text x="20" y="160">[Zum Starten der Animation den Kreis anklicken!]</text>
97: 
98: </svg>

[zum Anfang]