CODEWITHSUNDEEP
animationsvg
snowwalker
snowwalker

Reputation: 83

SVG animate point in cycle

I have a path with various arcs. I want to animate just a single arc indefinitely. Currently, what I can do is this :

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

Which can do this once. How can I make the animation indefinite?

Upvotes: 2

Views: 453

Answers (2)

Michael Mullany
Michael Mullany

Reputation: 31805

An easy way is to use the "values" array - which works in Chrome, Firefox & Safari (and I presume Opera) but not IE which has no support for SMIL anyway (although there's a polyfill library somewhere). But Robert's answer is clearly more elegant.

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

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124249

The end="indefinite" makes it repeat and the begin makes it start both at 0s and when the other animation finishes. Continuously repeats in 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>

Upvotes: 2

Related Questions