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 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-family: sans-serif;
24: font-size: 12px;
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.0, aber 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]
