animation - SVG动画循环点

Question

我有一条带有各种弧线的路径。我想无限期地为一条弧线制作动画。目前，我能做的是：

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

    <animate id="c1" 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" 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"     />

哪个可以做到这一点。如何使动画无限期？

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>

Answer 2

一种简单的方法是使用“值”数组——它适用于 Chrome、Firefox 和 Safari（我认为是 Opera），但不适用于不支持 SMIL 的 IE（尽管某处有一个 polyfill 库）。但罗伯特的回答显然更优雅。

<animate id="c1" xlink:href="#p1"     attributeName="d"     attributeType="XML"     
values="M 300 300 C 300 300 600 300 300 400;M 300 300 C 300 300 400 300 300 400;M 300 300 C 300 300 600 300 300 400" dur="2s"   repeatCount="indefinite"  fill="freeze"     />  

http://jsfiddle.net/gLxkt/2/