SVG animateMotion（calcMode 样条）在 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，它将在所有浏览器中运行。

如果有任何替代解决方案可以使用不同的缓动在圆形曲线上移动元素，我将不胜感激。

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 样条）在 FF 和 Safari 中不起作用

SVG animateMotion (calcMode spline) not working in FF and Safari

animation

svg

css-animations

svg-animate