SVG – Learning by Coding

[ wallclock_sync.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/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 setzender grüne mit
105:     begin=&quot;10s&quot;der rote mit begin=&quot;wallclock(...)&quot;.</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]