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

想实现一个路径动画,一个物体跟着路径运动可以控制暂停
但自己做的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>

正常路径

运动的时候偏移了