如何让搭载foreignObject的SVG路径动画在Safari浏览器中正常运行

首先明确结论：你当前的实现方案无法直接适配Safari浏览器，该问题是WebKit内核的已知兼容性限制导致，与你的代码逻辑无关。

原因说明 #

Safari对<animateMotion>动画绑定包含HTML内容的<foreignObject>元素的支持存在长期缺陷：

• 默认不识别与<foreignObject>平级放置的<animateMotion>动画关联关系
• 对<foreignObject>这类混合HTML的SVG元素的动画属性解析优先级低于纯SVG元素
• 对非整数的repeatCount属性支持异常，会直接导致动画不触发

可尝试的最小改动适配方案 #

如果不想更换整体实现，可以先做以下调整测试兼容性：

• 给外层<svg>标签补充xlink命名空间：xmlns:xlink="http://www.w3.org/1999/xlink"
• 给<foreignObject>设置唯一id，同时给<animateMotion>添加显式的目标绑定属性：xlink:href="#your-foreignobject-id"
• 暂时把非整数的repeatCount改为整数，改用调整dur时长的方式实现百分比进度控制
  如果以上调整后Safari仍然无法正常播放动画，就需要更换实现方案。

兼容性最好的替换方案 #

方案1：原生JS手动计算路径位置（无额外依赖） #

使用SVG标准APIgetPointAtLength()手动计算动画位置，兼容性覆盖所有主流浏览器包括Safari：

1. 先获取目标路径的总长度：const pathLength = document.getElementById(wave${waveid}).getTotalLength()
2. 用requestAnimationFrame做帧更新，根据当前动画进度百分比，计算对应位置的坐标：const point = path.getPointAtLength(progress * pathLength)
3. 直接更新<foreignObject>的transform属性为translate(${point.x} ${point.y})即可实现沿路径运动

方案2：替换为纯SVG元素实现 #

放弃使用<foreignObject>，将现在.valueSpan的样式全部用SVG原生元素实现：

• 用<rect>模拟白色带边框的标签背景
• 用<line>模拟底部的指示竖线
• 用<text>渲染数值内容
  纯SVG元素对<animateMotion>的支持在Safari中完全正常，不需要额外兼容处理。

方案3：使用GSAP动画库（改造成本最低） #

如果可以引入第三方库，使用GSAP的MotionPathPlugin可以直接实现元素沿SVG路径运动，库本身已经做好全浏览器兼容，不需要处理底层兼容性问题。

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