Question

对于keySplines，似乎存在关于SVG动画的问题。我使用谷歌浏览器v46.0

svg代码，

＆＃13;

<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>

＆＃13;

正如您所看到的，它是一个简单的矩形动画，它沿着标签中定义的路径进行动画制作，其中2个keySplines定义为第1段0 1 0 1非线性，第2段0 0 1 1给出线性插值。我已经看到了白色和黄色的直线路径，分别表示第一段和第二段。

对于第一段，矩形应该从白线的起点到白线的末端（作为其中心）。对于第二段，它应该从黄线的起点到黄线的末端（因为它的中心）。

但在这种情况下，这并不是很重要。当我将第1段keySpline从0 1 0 1更改为0 0 1 1时，动画将按预期运行。

我在某处出错或者这可能是Chrome中的错误吗？

谢谢！

SVG keySplines动画问题/错误

0 个答案: