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]
