animation - SVG 循环中的动画点

Question

我有一 strip 有各种弧线的路径。我只想无限期地制作单个弧线的动画。目前，我能做的是:

http://jsfiddle.net/gLxkt/1/

这一次就可以了。如何使动画无限期？

Answer 1

end="indefinite"使其重复，而 begin 使其在 0 处和其他动画结束时开始。在 Firefox 中不断重复。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"
    >

    <path id="p1" d="M 300 300 C 300 300 600 300 300 400  " stroke="blue" fill="none" stroke-width="4" />
<g>
    <path id="p1" d="M 300 300 C 300 300 600 300 300 400  " stroke="blue" fill="none" stroke-width="4" />

        <animate id="c1" begin="c2.end; 0s" end="indefinite" xlink:href="#p1"     attributeName="d"     attributeType="XML"     
        from="M 300 300 C 300 300 600 300 300 400  "
          to="M 300 300 C 300 300 400 300 300 400  " dur="1s"     fill="freeze"     />      

        <animate id="c2" begin="c1.end" end="indefinite" xlink:href="#p1"     attributeName="d"     attributeType="XML"     
        from="M 300 300 C 300 300 400 300 300 400  "
          to="M 300 300 C 300 300 600 300 300 400  " dur="1s"     fill="freeze"     />
         </g>

</svg>