animateMotion SVG, delay?

Question

The following code animates the img along the specific #pat path.

<switch>
<g i:extraneous="self">
    <path id="pat" style="stroke:url(#grad);" class="mypath" d="
        M144.668,123.467c0,0-13.001-133.999-143.668-121.665"/>
</g>
</switch>


<image xlink:href="http://m.kaon.com/icon/17001.png" width="30" height="30" x="-15" y="-15">
  <animateMotion rotate="auto" dur="3s" repeatCount="indefinite">
    <mpath xlink:href="#pat"/>
  </animateMotion>
</image>

Is there any way to loop the animation indefinitely, but to have a delay inbetween. Like animate 0->1, wait 5s, animate 0-1.

Using this resource: http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement.

Does this answer your question? [SVG animation delay on each repetition](https://stackoverflow.com/questions/31690880/svg-animation-delay-on-each-repetition) — Mahozad, May 08 '22 at 15:51

Ian · Accepted Answer · 2014-03-31T10:35:28.580

You could add another fake/pause element to link the begin/end...first one is just a pause that doesn't really do anything (so it doesn't vanish when its not on the path).

<animateTransform begin="myanim.end" id="pause" dur="3s" type="translate" attributeType="XML" attributeName="transform"/>

<animateMotion id="myanim" dur="6s" begin="0; pause.end" fill="freeze">
       <mpath xlink:href="#theMotionPath"/>
</animateMotion>

Example fiddle

animateMotion SVG, delay?

1 Answers1

Linked