Animation SVG，设置从x1，y1到x2，y2的线的动画？

“动画”属性的文档非常松散。不幸的是，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>

更新： 我最近让它工作了，下面是解决方案

将fill属性添加到值为freeze的动画元素中。像这样

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

以下是我获得的一些效果：SVGAnimate仅兼容浏览器！！！[Opera，Safari，Chrome]，抱歉没有firefox或IE。。。很好的警告，这会对CPU造成一些负担。

这是有效的（在Opera中测试）：

我发现您的代码中存在两个主要问题：

• 线条位于图像外部（宽度：480，x1:585）
• 模糊时间值（您在那里使用的是百分之一百秒！！！）

---

我不确定这是您要找的，但您可能想看看

Lazy Line Painter是一个jQuery插件，它允许您制作SVG路径动画。它的工作原理是将SVG线条图形转换为JavaScript代码，然后导入jQuery、Raphaël和惰性线条画师jQuery插件，瞧，完成了

---

懒线绘制插件允许您执行路径动画。这意味着，如果您有一个仅由线条组成的图像（有开始和结束，没有填充），那么此插件将允许您执行一个动画，该动画将跟踪线条以绘制图片–作为动画。

感谢您的回复。关于图像外的线条，这是一个错误，仅在本例中明显。我的工作副本中的画布大小是1020x768，但感谢您捕获它：）。模糊的时间值对动画的成功很重要，但是，我可以改变这些值，并简单地延长动画。如果毫秒是一个可接受的参数，那么从理论上讲，这应该是可行的，也许我应该转换为毫秒并附加“ms”（？…输入值）好吧，如果画布大小不是问题，那么我唯一更改的就是时间值。所以这一定是你问题的根源；-）。。。遇到了另一个问题，也许你知道解决方法。。。问题更新。也许你应该打开一个新问题，更多的人看它的可能性更高。我会试试。。。明天；-）你是一个美丽的人。愿你和你所爱的人繁荣昌盛。推荐jQuery。这是什么，2013年？

<?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>