SVG animateMotion keyPoints在Chrome/Safari值正确但动画位置渲染错误

这个跨浏览器差异来自不同内核的SVG动画实现逻辑区别：Firefox的Gecko内核会监听animateMotion元素keyPoints属性的动态变更，自动重新计算动画位置；但Chrome使用的Blink内核、Safari使用的WebKit内核，在animateMotion初始化完成后，不会主动响应keyPoints这类动画参数的动态更新——你在开发者工具里看到属性值正确，是因为DOM属性确实被React更新了，但浏览器的动画引擎没有读取新值重绘，所以元素一直停在初始位置。
另外你的代码里存在基础属性配置错误，进一步放大了兼容问题：

• dur属性传入infinite是非法值，dur代表单轮动画时长，无限循环的配置应该写在repeatCount属性上；你当前写的repeatCount="0"代表动画重复0次，等于不执行动画。Firefox对这类错误配置做了容错处理，Chrome/Safari则直接按初始状态锁死动画。
  你测试时用固定常量值能正常渲染，是因为常量值在animateMotion首次挂载时就存在，浏览器初始化动画阶段直接读取了该值，不存在初始化后动态更新属性的场景，自然不会触发兼容bug。

1. 修正动画基础属性配置 #

先把animateMotion的非法属性替换为合法值，dur按实际动画时长需求调整即可，无限循环要配置repeatCount="indefinite"：

<animateMotion
    xlinkHref="#fo"
    begin="0s"
    dur="1s"
    repeatCount="indefinite"
    keyPoints={animationProgressValue}
    fill="freeze"
    keyTimes="0;1"
    calcMode="linear"
    path={path}
/>

2. 强制动画元素随keyPoints更新重建 #

针对Chrome/Safari不响应动态属性更新的问题，给animateMotion元素绑定和animationProgressValue一致的key属性，这样React会在keyPoints值变化时销毁旧的动画实例、重新挂载新元素，强制浏览器在初始化阶段读取最新的keyPoints值计算位置：

<animateMotion
    key={animationProgressValue}
    xlinkHref="#fo"
    begin="0s"
    dur="1s"
    repeatCount="indefinite"
    keyPoints={animationProgressValue}
    fill="freeze"
    keyTimes="0;1"
    calcMode="linear"
    path={path}
/>

3. 可选兼容性优化 #

现代浏览器已经支持将animateMotion直接作为动画目标元素的子节点，不需要额外通过xlinkHref绑定目标，这种写法兼容性更稳定：

<foreignObject
    x={_get(translationValues, 'x')}
    y={_get(translationValues, 'y')}
    width="25"
    height="25"
    id="fo"
>
    <div id="note" className="note--t">
        <img
            src={noteImage}
            className="note--icon"
            alt="Notification Icon"
        />
    </div>
    <animateMotion
        key={animationProgressValue}
        begin="0s"
        dur="1s"
        repeatCount="indefinite"
        keyPoints={animationProgressValue}
        fill="freeze"
        keyTimes="0;1"
        calcMode="linear"
        path={path}
    />
</foreignObject>

内容的提问来源于stack exchange，提问作者aero