animation - 将 animateMotion 与 keyTimes/keyPoints 一起使用

Question

我正在尝试在 SVG 上使用非线性动画速率 <animateMotion> 通过使用 keyTimes="…" 和 keyPoints="…" 属性。它似乎不起作用:动画运动尽可能是线性的。

这是测试文件 ^{try it!}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
     viewBox="0 0 300 200">
  <style>
    path   { stroke:#999 }
    circle { fill-opacity:0.5; stroke:black }
  </style>
  <path   id="p" d="M30,160 L270,40" />
  <circle id="c" r="5" />
  <animateMotion x:href="#c" fill="freeze"
    dur="10s"
    keyTimes="0;0.1;1"
    keyPoints="0;0.9;1">
    <mpath x:href="#p" />
  </animateMotion>
</svg>

工作时，球应在第一秒内沿路径移动 90%，并在剩余 9 秒内移动最后 10%。我需要改变什么才能让它发挥作用？

我找到了another example online它工作正常，所以我知道这不是我的操作系统/浏览器/版本的问题。

_{(FWIW:Win7x64、Chrome30)}

Answer 1

我发现了我的错误。即使默认值为 calcMode是 linear - 这就是我想要的 - 我没有深入阅读规范，无法看到它是 <animateMotion> 的不同默认值。元素。

添加显式 calcMode="linear"解决了问题。