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]
