我animateMotion在 SVG 中使用路径动画。
粉红色的圆圈移动一个圆圈，白色的圆圈移动一个半圆形。
它们的速度、关键帧等都是一样的，但是有一个具体的区别——粉色圆圈的动画是倒置的，使用属性keyPoints="1;0" keyTimes="0;1"（偷看SO）。
问题在于，在 FF 中一切都按预期运行（期望的结果），但在 Chrome 和 Opera 中存在一个错误，即粉红色圆圈的移动速度比应有的快。
我的猜测是，这是由于动画反转时关键帧的变化引起的。
以下是其显示方式的示例：
| 火狐 | 歌剧和铬 |
|---|---|
 |
 |
这是代码：
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
background: #000;
margin: 0;
}
svg {
display: block;
}<svg width="300" viewbox="0 0 200 200" style="background: rgba(255,0,0,.1)">
<!-- circle big -->
<g transform="rotate(-63 100 100)">
<g>
<defs>
<path id="cb" d="M 100 190 A 1 1 0 0 1 100 10 A 1 1 0 0 1 100 190 Z" fill="none"/>
</defs>
<use xlink:href="#cb" stroke="white" stroke-width="4" stroke-dasharray="0 6" stroke-linecap="round" mask="url(#cbm)"/>
<mask id="cbm">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<use id="cba" xlink:href="#cb" stroke="black" stroke-width="5" stroke-dasharray="565.565" stroke-dashoffset="0"/>
<animate xlink:href="#cba" attributeName="stroke-dashoffset" to="565.565" dur="1.5s" keySplines="0.33 1 0.68 1" calcMode="spline" fill="freeze"/>
</mask>
</g>
<!-- Проблемное место -->
<circle id="cbb" cx="0" cy="0" r="7" fill="#c4007b" filter="url(#blur)">
<animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keyPoints="1;0" keyTimes="0;1" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cb"/></animateMotion>
</circle>
<!-- Проблемное место -->
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation=".5" />
</filter>
</defs>
</g>
<!-- circle small -->
<g transform="rotate(-50 100 100)">
<!-- left -->
<g stransform="rotate(45 100 100)">
<path id="cs-l" d="M 100 35 A 1 1 0 0 0 100 165" fill="none" stroke="#fed485" stroke-width="3" stroke-dasharray="204.232" mask="url(#scbm)"/>
<animate xlink:href="#cs-l" attributeName="stroke-dashoffset" from="204.232" to="0" dur="1.5s" keySplines="0.33 1 0.68 1" calcMode="spline" fill="freeze"/>
<!-- -->
<circle id="scb-l" cx="-6" cy="0" r="6" fill="white">
<animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-l"/></animateMotion>
</circle>
<mask id="scbm">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<circle cx="106" cy="35" r="9" fill="black"/>
<circle cx="-6" cy="0" r="9" fill="black">
<animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-l"/></animateMotion>
</circle>
<circle cx="94" cy="165" r="9" fill="black"/>
<circle cx="-6" cy="0" r="9" fill="black">
<animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-r"/></animateMotion>
</circle>
</mask>
</g>
<!-- right -->
<g stransform="rotate(45 100 100)">
<path id="cs-r" d="M 100 165 A 1 1 0 0 0 100 35" fill="none" stroke="#fed485" stroke-width="3" stroke-dasharray="204.232" mask="url(#scbm)"/>
<animate xlink:href="#cs-r" attributeName="stroke-dashoffset" from="204.232" to="0" dur="1.5s" keySplines="0.33 1 0.68 1" calcMode="spline" fill="freeze"/>
<!-- -->
<circle id="scb-r" cx="-6" cy="0" r="6" fill="white">
<animateMotion dur="1.5s" restart="whenNotActive" fill="freeze" rotate="auto" keySplines="0.33 1 0.68 1" calcMode="spline"><mpath xlink:href="#cs-r"/></animateMotion>
</circle>
</g>
</g>
</svg>我用注释突出了有问题的地方，HTML 中的第 16 行
问题：
是什么原因造成的，如何解决？
有人告诉我，问题也可能出在路径本身，沿着它发生运动，反转它可能比粉色圆圈的运动更容易。
当反转行进方向与
keyPoints="1;0" и keyTimes="0;1"Firefox 属性一起使用时，这很好。基于webkit引擎的浏览器：Chrome、Opera、Yandex、safari等在分享和属性时有bug
calcMode="spline"keyPoints="1;0" и keyTimes="0;1"您必须使用
calcMode="linear"，在这种情况下，动画将在所有浏览器中以相同的方式工作！