keySplines の場合、SVG アニメーションに問題があるようです。Google Chrome 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>ご覧のとおり、これはタグで定義されたパスに沿ってアニメーション化する単純な四角形のアニメーションであり、keySplines の 2 つのセグメントが定義されています。そのうちの最初のセグメント 0 1 0 1 は非線形で、2 番目のセグメント 0 0 1 1 は線形補間を提供します。私は、それぞれ最初と 2 番目のセグメントを表す白と黄色の直線であるパスを視覚化しました。
最初のセグメントでは、四角形は白線の始点から白線の終点まで (中心として) 実行する必要があります。2 番目のセグメントでは、黄色の線の始点から黄色の線の終わりまで (中心として) 実行する必要があります。
しかし、この場合はそうはいきません。そして、最初のセグメントの keySpline を 0 1 0 1 から 0 0 1 1 に変更すると、アニメーションは期待どおりに実行されます。
私はどこかで間違っているのでしょうか、それともクロムのバグでしょうか?
ありがとう ！