SVG 动画路径移动怎么控制路程停止和运动的时候路径偏移了

Question

想实现一个路径动画,一个物体跟着路径运动可以控制暂停
但自己做的svg在运动的时候偏移了在离path,在path的右下方100px以上
问题:想控制到某个点停止,下次继续在这个点开始运动起来,知道运动到终点,我这个只有3个停止点(包括终点)
多个路径有点麻烦要分开写,还有设置运动时间一样好像不生效,例如2次6s,就没反应.
相关代码

<svg class="svg" width="1000" height="560">
                 <path d="M77,140c54-76,94,0,94,0c55.25-75.5,92,0,92,0c35-45.25,0,99,0,99c33.5-43.5,0,91,0,91
    c37.5-45.5,0,96,0,96c49.25-69.75,91,0,91,0c51-68.5,94,0,94,0c52-68,93,0,93,0c55.5-69,98,0,98,0c29-147.5-4.667-89,0-96
    c28.333-139,0-91,0-91c50.667-72.667,95,0,95,0c50-72.333,91,0,91,0"
                       stroke="#ccc" stroke-width="2"
                       fill="none"/>
                 <g>
                     <path d="M77,140c54-76,94,0,94,0c55.25-75.5,92,0,92,0c35-45.25,0,99,0,99c33.5-43.5,0,91,0,91
    c37.5-45.5,0,96,0,96c49.25-69.75,91,0,91,0c51-68.5,94,0,94,0c52-68,93,0,93,0c55.5-69,98,0,98,0c29-147.5-4.667-89,0-96
    c28.333-139,0-91,0-91c50.667-72.667,95,0,95,0c50-72.333,91,0,91,0"
                           stroke="#f00" stroke-width="2"
                           fill="none"/>
                     <image xlink:href="images/luobojun.png" x="19" y="25" height="130px" width="116px"/>
                     <animateMotion
                             dur="6s"
                             repeatCount="1"
                             path="M77,140c54-76,94,0,94,0c55.25-75.5,92,0,92,0c35-45.25,0,99,0,99c33.5-43.5,0,91,0,91
    c37.5-45.5,0,96,0,96c49.25-69.75,91,0,91,0c51-68.5,94,0,94,0c52-68,93,0,93,0c55.5-69,98,0,98,0c29-147.5-4.667-89,0-96
    c28.333-139,0-91,0-91c50.667-72.667,95,0,95,0c50-72.333,91,0,91,0"
                     />
                 </g>
             </svg>

正常路径

运动的时候偏移了

Answer 1

<svg width="1000" height="560">

<defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="80" width="80">
       <image x="0" y="0" xlink:href="luobo.png"></image>
    </pattern>
</defs>

<path d="M77,140c54-76,94,0,94,0c55.25-75.5,92,0,92,0c35-45.25,0,99,0,99c33.5-43.5,0,91,0,91
c37.5-45.5,0,96,0,96c49.25-69.75,91,0,91,0c51-68.5,94,0,94,0c52-68,93,0,93,0c55.5-69,98,0,98,0c29-147.5-4.667-89,0-96
c28.333-139,0-91,0-91c50.667-72.667,95,0,95,0c50-72.333,91,0,91,0" stroke="#ccc" stroke-width="2" fill="none" />        
<rect x='-33' y='-38.5' width="66" height="77" fill="url(#image)">
    <animateMotion dur="6s" repeatCount="1" path="M77,140c54-76,94,0,94,0c55.25-75.5,92,0,92,0c35-45.25,0,99,0,99c33.5-43.5,0,91,0,91
c37.5-45.5,0,96,0,96c49.25-69.75,91,0,91,0c51-68.5,94,0,94,0c52-68,93,0,93,0c55.5-69,98,0,98,0c29-147.5-4.667-89,0-96
c28.333-139,0-91,0-91c50.667-72.667,95,0,95,0c50-72.333,91,0,91,0" />
</rect>

</svg>

rect的x和y是图片萝卜宽高的负的一半即可

Answer 2

请问这个问题，解决了吗，怎么解决的

Answer 3

这个问题是如何解决的，跪求。