-- 作者:xfecczgh
-- 发布时间:8/23/2006 9:39:00 AM
--
在learn by code上有一个绝对时间的例子, 为什么红色的圆不运动? <?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [ <!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink"> ]> <!-- SVG - Learning By Coding - http://www.datenverdrahten.de/svglbc/ --> <!-- Author: Dr. Thomas Meinike 06/05 - thomas@handmadecode.de --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Init(evt)"> <title>SVG - Learning By Coding</title> <desc>SVG-Spezifikation in Beispielen</desc> <defs> <script type="text/javascript"> <![CDATA[ function Init(load_evt) { var svgdoc,lz,sz,kr,an,nd,udutc,ndutc_plus10s,wc, svgns="http://www.w3.org/2000/svg"; // SVG-Objekte zuweisen svgdoc=load_evt.target.ownerDocument; lz=svgdoc.getElementById("ladezeit"); sz=svgdoc.getElementById("startzeit"); kr1=svgdoc.getElementById("kreis1"); kr2=svgdoc.getElementById("kreis2"); // Informationen zu Datum/Zeit abfragen nd=new Date(); ndutc=getUTCDateTime(nd); ndutc_plus10s=getUTCDateTime(new Date(nd.getTime()+10000)); wc="wallclock("+ndutc_plus10s+")"; // Textausgaben lz.firstChild.nodeValue+=ndutc; sz.firstChild.nodeValue+="Ladezeit + 10s = "+wc; // Animation fuer Kreis 1 mit begin="10s" erzeugen an=svgdoc.createElementNS(svgns,"animate"); an.setAttribute("attributeName","cx"); an.setAttribute("attributeType","XML"); an.setAttribute("begin","10s"); an.setAttribute("dur","10s"); an.setAttribute("from","50"); an.setAttribute("to","430"); an.setAttribute("fill","freeze"); kr1.appendChild(an); // Animation fuer Kreis 2 in mit begin="wallclock(...)" erzeugen an=svgdoc.createElementNS(svgns,"animate"); an.setAttribute("attributeName","cx"); an.setAttribute("attributeType","XML"); an.setAttribute("begin",wc); an.setAttribute("dur","10"); an.setAttribute("from","50"); an.setAttribute("to","430"); an.setAttribute("fill","freeze"); kr2.appendChild(an); } function getUTCDateTime(dt) { var dd,mm,yyyy,hh,mi,ss; dd=dt.getUTCDate(); dd=(dd<10)?"0"+dd:dd; mm=dt.getUTCMonth()+1; mm=(mm<10)?"0"+mm:mm; yyyy=dt.getUTCFullYear(); hh=dt.getUTCHours(); hh=(hh<10)?"0"+hh:hh; mi=dt.getUTCMinutes(); mi=(mi<10)?"0"+mi:mi; ss=dt.getUTCSeconds(); ss=(ss<10)?"0"+ss:ss; // UTC-Format YYYY-MM-DDThh:mm:ssZ erzeugen return yyyy+"-"+mm+"-"+dd+"T"+hh+":"+mi+":"+ss+"Z"; } function AnimInfo(click_evt) { if(printNode)alert("Erzeugtes animate-Element:\n\n"+ printNode(click_evt.target.firstChild)); else alert("printNode()-Methode nicht verfuegbar."); } ]]> </script> </defs> <text x="20" y="30" style="font-size: 24px"> Wallclock-Synchronisation mit UTC-Zeitwerten nach ISO 8601</text> <text x="30" y="55" style="font-size: 12px; fill: #000"> Beide Kreise sollten sich nach 10s in Bewegung setzen: der gr黱e mit begin="10s", der rote mit begin="wallclock(...)".</text> <text id="ladezeit" x="30" y="80" style="font-size: 14px; fill: #00C">Ladezeit (UTC): </text> <text id="startzeit" x="30" y="100" style="font-size: 14px; fill: #F00">Startzeit (UTC): </text> <text x="30" y="260" style="font-size: 12px; fill: #000"> Zur Abfrage von Details zu den erzeugten animate-Elementen Kreise anklicken!</text> <circle id="kreis1" cx="50" cy="150" r="20" fill="#090" onclick="AnimInfo(evt)"/> <circle id="kreis2" cx="50" cy="210" r="20" fill="#F00" onclick="AnimInfo(evt)"/> </svg>
|