animation - SVG animateMotion (calcMode spline) 在 FF 和 Safari 中不起作用

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适用于所有浏览器。

我也很欣赏任何替代解决方案，用于在具有不同缓动的圆形曲线上移动元素。

标签： animationsvgcss-animationssvg-animate

Answer 1

解决方案

我发现，有两件事彼此独立，从而产生了问题：

1. Safari 不接受 KeyTimes 值之间的空格（所有其他浏览器都接受，Safari 在 KeySplines 中也接受）。
2. 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>