animateMotion SVG，延迟？答案

【问题标题】：animateMotion SVG, delay?animateMotion SVG，延迟？
【发布时间】：2014-03-28 21:36:38
【问题描述】：

以下代码沿特定的#pat 路径为 img 设置动画。

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

有没有办法无限期地循环动画，但在两者之间有一个延迟。像动画 0->1 一样，等待 5 秒，动画 0-1。

使用此资源：http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement。

【问题讨论】：

标签： animation svg

【解决方案1】：

您可以添加另一个假/暂停元素来链接开始/结束...第一个只是一个暂停，并没有真正做任何事情（所以当它不在路径上时它不会消失）。

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

例如fiddle

【讨论】：