svg路径动画自适应的写法

<svg style="20%;" viewBox="0 0 320 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g stroke="#979797" stroke-width="1" fill="none">
    <path d="M10 80 Q 77.5 10, 145 80 T 280 80" id="motionPath"></path>
  </g>
  <g id="cray" transform="translate(0, -24)" stroke="#979797">
    <image id="cray1" xlink:href="/moban/images/shoushi1.png" x="0" y="0" width="30px"/>
  </g>
  <animateMotion 
    xlink:href="#cray"
    dur="5s"
    begin="0s"
    fill="freeze"
    repeatCount="indefinite"
    rotate="auto"
  >
    <mpath xlink:href="#motionPath" />
  </animateMotion>
</svg>

 重新播放可以用jquery remove html 然后再添加 就行了      也可以用jquery修改属性