在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>
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 请教两个问题
(订阅本版)
2006/8/21 16:17:00
新浪微博
请教两个问题
