animation - SVG animate point in cycle -


i have path various arcs. want animate single arc indefinitely. currently, can :

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 once. how can make animation indefinite?

the end="indefinite" makes repeat , begin makes start both @ 0s , when 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> 

Comments

Popular posts from this blog

android - getbluetoothservice() called with no bluetoothmanagercallback -

sql - ASP.NET SqlDataSource, like on SelectCommand -

ios - Undefined symbols for architecture armv7: "_OBJC_CLASS_$_SSZipArchive" -