Question

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



    <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"     />

<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

结束=“无限期”使其重复，并且开始使其在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）但不支持SM，但不管怎样都不支持SMIL（尽管某处有一个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/

SVG周期中的动画点

2 个答案: