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/05 - 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:
<script type="text/javascript">
19:
<![CDATA[
20: 21:
function Init(load_evt)
22:
{
23:
var svgdoc,lz,sz,kr,an,nd,udutc,ndutc_plus10s,wc,
24:
svgns="http://www.w3.org/2000/svg";
25: 26:
// SVG-Objekte zuweisen
27:
svgdoc=load_evt.target.ownerDocument;
28:
lz=svgdoc.getElementById("ladezeit");
29:
sz=svgdoc.getElementById("startzeit");
30:
kr1=svgdoc.getElementById("kreis1");
31:
kr2=svgdoc.getElementById("kreis2");
32: 33:
// Informationen zu Datum/Zeit abfragen
34:
nd=new Date();
35:
ndutc=getUTCDateTime(nd);
36:
ndutc_plus10s=getUTCDateTime(new Date(nd.getTime()+10000));
37:
wc="wallclock("+ndutc_plus10s+")";
38: 39:
// Textausgaben
40:
lz.firstChild.nodeValue+=ndutc;
41:
sz.firstChild.nodeValue+="Ladezeit + 10s = "+wc;
42: 43:
// Animation fuer Kreis 1 mit begin="10s" erzeugen
44:
an=svgdoc.createElementNS(svgns,"animate");
45:
an.setAttribute("attributeName","cx");
46:
an.setAttribute("attributeType","XML");
47:
an.setAttribute("begin","10s");
48:
an.setAttribute("dur","10s");
49:
an.setAttribute("from","50");
50:
an.setAttribute("to","430");
51:
an.setAttribute("fill","freeze");
52:
kr1.appendChild(an);
53: 54:
// Animation fuer Kreis 2 in mit begin="wallclock(...)" erzeugen
55:
an=svgdoc.createElementNS(svgns,"animate");
56:
an.setAttribute("attributeName","cx");
57:
an.setAttribute("attributeType","XML");
58:
an.setAttribute("begin",wc);
59:
an.setAttribute("dur","10");
60:
an.setAttribute("from","50");
61:
an.setAttribute("to","430");
62:
an.setAttribute("fill","freeze");
63:
kr2.appendChild(an);
64:
}
65: 66: 67:
function getUTCDateTime(dt)
68:
{
69:
var dd,mm,yyyy,hh,mi,ss;
70: 71:
dd=dt.getUTCDate();
72:
dd=(dd<10)?"0"+dd:dd;
73:
mm=dt.getUTCMonth()+1;
74:
mm=(mm<10)?"0"+mm:mm;
75:
yyyy=dt.getUTCFullYear();
76:
hh=dt.getUTCHours();
77:
hh=(hh<10)?"0"+hh:hh;
78:
mi=dt.getUTCMinutes();
79:
mi=(mi<10)?"0"+mi:mi;
80:
ss=dt.getUTCSeconds();
81:
ss=(ss<10)?"0"+ss:ss;
82: 83:
// UTC-Format YYYY-MM-DDThh:mm:ssZ erzeugen
84:
return yyyy+"-"+mm+"-"+dd+"T"+hh+":"+mi+":"+ss+"Z";
85:
}
86: 87: 88:
function AnimInfo(click_evt)
89:
{
90:
if(printNode)alert("Erzeugtes animate-Element:\n\n"+
91:
printNode(click_evt.target.firstChild));
92:
else alert("printNode()-Methode nicht verfuegbar.");
93:
}
94: 95:
]]>
96:
</script>
97: 98:
</defs>
99: 100:
<text x="20" y="30" style="font-size: 24px">
101:
Wallclock-Synchronisation mit UTC-Zeitwerten nach ISO 8601</text>
102: 103:
<text x="30" y="55" style="font-size: 12px; fill: #000">
104:
Beide Kreise sollten sich nach 10s in Bewegung setzen: der grüne mit
105:
begin="10s", der rote mit begin="wallclock(...)".</text>
106:
<text id="ladezeit" x="30" y="80"
107:
style="font-size: 14px; fill: #00C">Ladezeit (UTC): </text>
108:
<text id="startzeit" x="30" y="100"
109:
style="font-size: 14px; fill: #F00">Startzeit (UTC): </text>
110:
<text x="30" y="260" style="font-size: 12px; fill: #000">
111:
Zur Abfrage von Details zu den erzeugten animate-Elementen
112:
Kreise anklicken!</text>
113: 114:
<circle id="kreis1" cx="50" cy="150" r="20" fill="#090" onclick="AnimInfo(evt)"/>
115:
<circle id="kreis2" cx="50" cy="210" r="20" fill="#F00" onclick="AnimInfo(evt)"/>
116: 117:
</svg>
[zum Anfang]
