animation - SVG animate point in cycle -
i have path various arcs. want animate single arc indefinitely. currently, can :
<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
Post a Comment