SVG文字遮罩跑马灯动画在Safari及Codepen中异常问题咨询

一、Safari（macOS/iOS）动画失效原因及修复 #

Safari对SVG内部元素的CSS动画支持存在兼容性限制，尤其是元素处于<mask>容器内时：

• mask内元素的CSS transform动画支持缺陷：Safari无法正确解析并执行mask内部SVG元素的CSS transform 动画，这类场景下需要改用SVG原生动画方案，而非CSS动画。
• 前缀无法覆盖核心兼容问题：虽然代码中添加了-webkit-transform前缀，但Safari针对mask内元素的动画触发逻辑与其他浏览器不同，仅靠前缀无法解决根本问题。

修复步骤 #

1. 移除CSS中针对.marquee text的animation和transform属性；
2. 在SVG的<text>元素中添加原生动画标签：

<text id="text" x="100%" y="50%">
  <animate attributeName="x" from="100%" to="-100%" dur="10s" repeatCount="indefinite" />
  Humble Beginnings Humble Beginnings Humble Beginnings Humble Beginnings Humble Beginnings Humble Beginnings Humble Beginnings Humble Beginnings Humble Beginnings
</text>

3. 补充mask内rect的填充色（默认透明会影响mask遮罩逻辑）：

<rect x="0" y="0" height="100%" width="100%" fill="#000"></rect>

二、Stack Overflow片段正常但Codepen异常的原因 #

两者运行环境的差异导致了表现不一致：

• 前缀与样式补全差异：Stack Overflow代码片段环境会自动补全必要的浏览器前缀，且容器样式更简洁；而Codepen默认环境未自动添加webkit前缀，或全局样式干扰了SVG渲染。
• 资源加载顺序差异：Codepen的异步加载机制可能导致SVG的mask引用在<image>元素渲染时尚未就绪，而Stack Overflow片段为同步加载，mask能被正确识别。
• 容器样式冲突：Codepen的默认容器可能继承了额外的overflow或定位规则，导致动画效果被隐藏。

Codepen适配建议 #

• 为mask属性添加webkit前缀：-webkit-mask: url(#text-mask-hello);；
• 为SVG元素添加强制占满容器的样式：

.marquee svg {
  width: 100%;
  height: 100%;
  display: block;
}

• 检查Codepen的全局CSS设置，禁用可能干扰的重置规则。

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