我有一个非常好的svg动画,但我有一点问题.
有一个骑自行车的人从左到右骑.每时每刻 …
我希望骑自行车的人从左到右骑行,然后从右到左骑行,依此类推.这是我的笔：
<svg version="1.1" x="0" y="0"
viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve">
<path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/>
<g id="bike" fill="#a2b91c" transform="scale (-1, 1) translate(-800, -67)">
<path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1
c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1
c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8
c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7
c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0
c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1
c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6
c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4
c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4
c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1
c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3
c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8
c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1
c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8
C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2
c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7
C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6
c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4
c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z
M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6
c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5
l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2
c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3
C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0
c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7
c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5
c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4
c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4
c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7
c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0
L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8
c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8
c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1
C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4
c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6
c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5
c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6
C802.5,56.5,803.1,58.8,802.6,60.6z"/>
</g>
<animateMotion
xlink:href="#bike"
dur="6s"
begin="0s"
repeatCount="indefinite"
rotate="auto"
direction="alternate"
>
<mpath xlink:href="#pfad" />
</animateMotion>
</svg>谢谢
最佳答案 这适用于keyPoints和keyTimes,calcMode =“linear”部分用于Chrome错误.然后我使用id和.end开始每个动画,使用0s对第一次运行进行例外; second.end.
<svg version="1.1" x="0" y="0"
viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve">
<path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/>
<g id="bike" fill="#a2b91c" transform="scale (-1, 1) translate(-800, -67)">
<path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1
c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1
c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8
c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7
c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0
c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1
c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6
c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4
c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4
c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1
c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3
c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8
c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1
c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8
C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2
c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7
C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6
c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4
c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z
M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6
c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5
l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2
c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3
C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0
c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7
c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5
c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4
c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4
c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7
c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0
L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8
c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8
c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1
C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4
c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6
c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5
c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6
C802.5,56.5,803.1,58.8,802.6,60.6z"/>
</g>
<animateMotion
xlink:href="#bike"
dur="6s"
begin="0s;second.end"
repeatCount="1"
rotate="auto"
direction="alternate"
fill="freeze"
id="first">
<mpath xlink:href="#pfad" />
</animateMotion>
<animateMotion
xlink:href="#bike"
dur="6s"
begin="first.end"
repeatCount="1"
rotate="auto"
direction="alternate"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear"
fill="freeze"
id="second">
<mpath xlink:href="#pfad" />
</animateMotion>
</svg>