在下面的代码中,遇到一个奇怪的问题.
该代码是增加一个运动的圆,但是没有运动,
如果使用path属性,可以运动,
如果将增加的圆拷贝到test内部,可以运动,说明增加的圆的代码没有问题.
真是奇怪, 究竟是为什么?
<?xml version="1.0" standalone="no"?>
<svg onload="init()">
<!-- script type="text/javascript" xlink:href="train.js"/ -->
<script type="text/javascript"><![CDATA[
var svgdoc;
var newCircle;
var newMotion;
var newPath;
var test;
var svgns="http://www.w3.org/2000/svg";
function init()
{
svgdoc = document;
test = svgdoc.getElementById("test");
go();
}
function go()
{
addMotion();
}
//增加一个运动的圆
function addMotion()
{
newCircle=svgdoc.createElementNS(svgns,"circle");
newCircle.setAttribute("cx","0");
newCircle.setAttribute("cy","0");
newCircle.setAttribute("r","5");
test.appendChild(newCircle);
newMotion = svgdoc.createElementNS(svgns,"animateMotion");
newMotion.setAttribute("begin","1s");
newMotion.setAttribute("dur","5s");
//如果使用下面的属性，增加的圆可以运动
//newMotion.setAttribute("path","M100,100 T200,200");
newCircle.appendChild(newMotion);
//使用mpath元素就不能运动
newPath = svgdoc.createElementNS(svgns,"mpath");
newPath.setAttribute("xlink:href","#path1");
newMotion.appendChild(newPath);
}
function Copy2Clipboard()
{
var shapes = test.childNodes;
var s = "";
if(top.clipboardData && shapes.length>0)
{
for(i=0;i<shapes.length;i++)
{
s+="\r\n "+printNode(shapes.item(i));
}
top.clipboardData.setData("Text",s);
}
}
]]></script>
<defs>
<circle id="111" cx="100" cy="100" r="5" style="fill:white;stroke:black"/>
<circle id="222" cx="200" cy="200" r="5" style="fill:white;stroke:black"/>
<path id="path1" d="M100,100 T200,200" style="fill:none;stroke:black;stroke-width;3"/>
</defs>
<use xlink:href="#path1"/>
<use xlink:href="#111"/>
<use xlink:href="#222"/>
<!-- 在此增加一个运动的圆 -->
<g id="test">
<!-- circle cx="0" cy="0" r="5"><animateMotion begin="1s" dur="5s" accumulate="none" additive="replace" calcMode="linear" fill="remove" restart="always"><mpath xlink:href="#path1"/></animateMotion></circle> -->
</g>
<circle cx="0" cy="0" r="5" fill="#F00">
<animateMotion begin="0s" dur="5s" accumulate="none" additive="replace" calcMode="linear" restart="always">
<mpath xlink:href="#path1"/>
</animateMotion>
</circle>
<a xlink:href="">
<text x="5" y="390" onclick="Copy2Clipboard()">> Copy
<set attributeName="fill" attributeType="CSS" to="#F00" begin="mouseover"/>
<set attributeName="fill" attributeType="CSS" to="#000" begin="mouseout"/>
</text>
</a>
</svg>
[返回] 中文XML论坛 - 专业的XML技术讨论区 →
XML.ORG.CN讨论区 - 高级XML应用 → 『 SVG/GML/VRML/X3D/XAML 』 → 难道是一个bug?
(订阅本版)
2006/8/24 8:44:00
新浪微博
难道是一个bug?
