SVG,动画从x1,y1到x2,y2的一条线？

Question

animate属性的记录非常松散.不幸的是,对于我来说,W3文档SVG的方式非常难以理解和交叉引用.

我要工作(至少向前迈出一步)......应该知道将秒转换为毫秒(拍打,前额)

我更新了代码以反映我的下一个踩踏石(遇到另一个问题).当我有两行动画时,另一行在下一行启动时会消失,我该怎么做才能使每一行都保持动画状态？...我认为它与'fill'属性有关,但'fill = freeze'将线转换为垂直.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
         "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="1020" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:rgb(255,255,255)" >
<g style="stroke:black" >
<line x1="242.25" y1="216" x2="242.25" y2="216" style="stroke:rgb(0,0,0);stroke-width:1;" >
<animate attributeName="x2" attributeType="XML" from="242.25" to="219.9375" begin="0ms" dur="117ms" />
<animate attributeName="y2" attributeType="XML" from="216" to="170.999808" begin="0ms" dur="117ms" />
</line>
<line x1="219.9375" y1="170.999808" x2="219.9375" y2="170.999808" style="stroke:rgb(0,0,0);stroke-width:1;" >
<animate attributeName="x2" attributeType="XML" from="219.9375" to="207.1875" begin="117ms" dur="83ms" />
<animate attributeName="y2" attributeType="XML" from="170.999808" to="153.149952" begin="117ms" dur="83ms" />
</line>
</g>
</svg>

更新:我最近得到了它的工作,这是解决方案

使用freeze值为animate元素添加fill属性.像这样

<animate attributeName="y2" attributeType="XML" ... fill="freeze" />

以下是我实现的一些效果:仅限SVGAnimate兼容浏览器![Opera,Safari,Chrome],抱歉没有firefox或IE ...公平警告,它对CPU征税了一下.

Answer 1

这适用(在Opera中测试):

<?xml version="1.0" encoding="iso-8859-1"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
            "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg width="480" height="320" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g style="stroke:black" > 
        <line x1="0" y1="0" x2="50" y2="50" style="stroke:rgb(0,0,0);stroke-width:20;" > 
            <animate attributeName="x2" from="50" to="100" begin="1s" dur="2s" /> 
            <animate attributeName="y2" from="50" to="100" begin="1s" dur="2s" /> 
        </line> 
    </g> 
</svg> 

我在您的代码中看到两个主要问题:

• 该线在图像外(宽度:480,x1:585)
• 模糊的时间值(你在那里使用百分之一秒!!!)