2

さまざまな弧のあるパスがあります。1 つの円弧だけを無期限にアニメートしたい。現在、私ができることはこれです：

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

これを一度に行うことができます。アニメーションを無期限にするにはどうすればよいですか?

4

2 に答える 2

2

end="indefined" はそれを繰り返し、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>
于 2013-04-09T07:03:22.927 に答える
0

簡単な方法は、「values」配列を使用することです。これは、Chrome、Firefox、および Safari (おそらく Opera) で機能しますが、とにかく SMIL をサポートしていない IE では機能しません (ポリフィル ライブラリはどこかにありますが)。しかし、ロバートの答えは明らかによりエレガントです。

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

于 2013-04-09T06:40:04.387 に答える