在 keySplines 的情况下,SVG 动画似乎存在问题。我正在使用谷歌浏览器 v46.0
svg代码,
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" style="background:#141313">
<g>
<animateMotion path="M125,95 C158.33,95 258.33,95 325,95 C391.66,95 491.66,95 525,95 " calcMode="spline" begin="0s" dur="10s" keyTimes="0;0.50;1" keySplines="0 1 0 1 ;0 0 1 1 " fill="freeze" />
<path d="M75,-75 C75,-75 75,75 75,75 C75,75 -75,75 -75,75 C-75,75 -75,-75 -75,-75 C-75,-75 75,-75 75,-75 " stroke="#ffffff" stroke-width="2" stroke-opacity="1" fill="#ff0000" fill-opacity="1">
</path>
</g>
<!-- the path defnined in the above animatemotion tag broken into component paths and visualized for reference -->
<path d="M125,95 C158.33,95 258.33,95 325,95 " stroke="#ffffff" stroke-width="2" stroke-opacity="1" fill-opacity="0" />
<path d="M325,95 C391.66,95 491.66,95 525,95 " stroke="#ffff00" stroke-width="2" stroke-opacity="1" fill-opacity="0" />
</svg>
如您所见,它是一个简单的矩形动画,它沿着标记中定义的路径进行动画处理,其中定义了 2 段 keySplines,其中第 1 段 0 1 0 1 是非线性的,而第二段 0 0 1 1 给出线性插值。我已经可视化了路径,它是一条白色和黄色的直线,分别表示第一段和第二段。
对于第一段,矩形应该从白线的起点到白线的终点(作为其中心)。对于第二段,它应该从黄线的起点到黄线的终点(作为其中心)。
但在这种情况下并没有发生这种情况。当我将第一段 keySpline 从 0 1 0 1 更改为 0 0 1 1 时,动画按预期运行。
我在某个地方出错了还是这可能是 chrome 中的错误?
谢谢 !