大家好，问个关于svg的问题

Question

     最近做一个远程监控得项目，需要用到svg，用来配合ajax实时显示，我现在做了个svg动画，在IE、safari中能打开（已装了SVGView插件），反而在火狐中打不开了，这个项目是针对火狐的……这个问题困扰我两天了，上网搜了很多资料，还是不知道为什么火狐中显示不了，希望各位能帮忙看下，附上SVG文件代码。
    

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg onload="settime(evt)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" a3:scriptImplementation="Adobe">

<defs>

<script language="JavaScript" a3:scriptImplementation="Adobe">

<![CDATA[

if (!window)

  window = this;

function settime(evt)

{

var now=new Date();

var Seconds=now.getSeconds();

var Minutes=now.getMinutes()+Seconds/60;

var Hours=now.getHours()+Minutes/60;

var SVG_Document;

SVG_Document = evt.target.ownerDocument; 

svgRoot = SVG_Document.rootElement;

var sec=SVG_Document.getElementById("seconds");

sec.setAttribute("transform",'rotate('+(Seconds*6)+')');

var min=SVG_Document.getElementById("minutes");

min.setAttribute("transform",'rotate('+(Minutes*6)+')');

var hou=SVG_Document.getElementById("hours");

hou.setAttribute("transform",'rotate('+(Hours*30)+')');

}

]]>

</script>

</defs>

<circle cx="100" cy="100" r="80" style="fill:white;stroke:blue;stroke-widt:4"/>

<g style="font-family:Times;font-size:15">

<text x="130" y="46">1</text>

<text x="154" y="71">2</text>

<text x="165" y="106">3</text>

<text x="155" y="140">4</text>

<text x="130" y="166">5</text>

<text x="96" y="175">6</text>

<text x="62" y="166">7</text>

<text x="37" y="140">8</text>

<text x="27" y="106">9</text>

<text x="34" y="71">10</text>

<text x="58" y="46">11</text>

<text x="92" y="37">12</text>

</g>

<g transform="translate(100 100)">

<g id="hours">

<line x1="0" y1="0" x2="0" y2="-35" style="stroke-width:4;stroke:black">

<animateTransform attributeName="transform" type="rotate" dur="43200s" values="0;360" repeatCount="indefinite"/>

</line>

</g>

<g id="minutes">

<line x1="0" y1="0" x2="0" y2="-55" style="stroke-width:2; stroke:black">

<animateTransform attributeName="transform" type="rotate" dur="3600s" values="0;360" repeatCount="indefinite"/>

</line>

</g>

<g id="seconds">

<line x1="0" y1="0" x2="0" y2="-75" style="stroke-width:1; stroke:red">

<animateTransform attributeName="transform" type="rotate" dur="60s" values="0;360"

repeatCount="indefinite"/>

</line>

</g>

</g>

<circle cs="100" cy="100" r="3" style="fill:black;stroke:black"/>

</svg>

Answer 1

在settime(evt)前边添加一个全局变量
[code="javascript"]var event_save;[/code]

在settime(evt)的最后补上
[code="javascript"]
event_save = evt;
setTimeout("settime(event_save)",1000);
[/code]

我的FF是3.07，这个钟挺漂亮的。

修改后的代码如下
[code="javascript"]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" a3:scriptImplementation="Adobe">

<![CDATA[ if (!window) window = this; var event_save; function settime(evt) { event_save = evt; var now=new Date(); var Seconds=now.getSeconds(); var Minutes=now.getMinutes()+Seconds/60; var Hours=now.getHours()+Minutes/60; var SVG_Document; SVG_Document = evt.target.ownerDocument; svgRoot = SVG_Document.rootElement; var sec=SVG_Document.getElementById("seconds"); sec.setAttribute("transform",'rotate('+(Seconds*6)+')'); var min=SVG_Document.getElementById("minutes"); min.setAttribute("transform",'rotate('+(Minutes*6)+')'); var hou=SVG_Document.getElementById("hours"); hou.setAttribute("transform",'rotate('+(Hours*30)+')'); setTimeout("settime(event_save)",1000); } ]]>

1
2
3
4
5
6
7
8
9
10
11
12














repeatCount="indefinite"/>





[/code]