Question

我想沿着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,0c0-86.5,115.1-87.2,115.1,0
    c0-86.5,55.5-123.5,55.5,111" />

如果我删除calcMode，keySplines和keyTimes，则它在所有浏览器中均有效。

我也希望能有任何其他解决方案，可以在具有不同缓动的圆形曲线上移动元素。

Answer 1

解决方案

我发现，有两件事相互独立，从而导致了问题：

Safari不接受KeyTimes值之间的空格（所有其他浏览器都接受，并且Safari在KeySplines中也接受）。
Firefox对于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,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111" />
	  </circle>
  	<path stroke="red" fill="none" d="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111"/>
  </g>
</svg>

SVG animateMotion（calcMode spline）在FF和Safari中不起作用

1 个答案: