我想沿着svg内的路径以不同的缓动方式移动一个圆。我想使用animateMotion，但以前从未使用过。在这种情况下，不能使用JS。
它在Chrome和Opera中工作正常，但在Safari和Firefox中工作不正常。
<animateMotion
dur="4s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0.3 0 1 1"
keyTimes="0 ; 0.3 ; 0.6 ; 1"
path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,115.1-87.2,115.1,0
c0-86.5,55.5-123.5,55.5,111" />
如果我删除calcMode，keySplines和keyTimes，则它在所有浏览器中均有效。
我也希望能有任何其他解决方案，可以在具有不同缓动的圆形曲线上移动元素。
解决方案
我发现，有两件事相互独立，从而导致了问题：
KeyTimes和KeySplines似乎还需要另外一个价值。因此，我为每一行添加了一个值。 固定代码：
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
keyTimes="0;0.2;0.4;0.6;1"
完整示例：
<svg version="1.1" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<g>
<circle r="13.5" fill="black">
<animateMotion
dur="4s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
keyTimes="0;0.2;0.4;0.6;1"
path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,115.1-87.2,115.1,55.5-123.5,55.5,111" />
</circle>
<path stroke="red" fill="none" d="M54,111"/>
</g>
</svg>