SVG动画在Firefox及Safari浏览器无法正常运行问题咨询

问题原因 #

• Safari完全不展示：这类动画大多依赖CSS @property 规则定义可动画的自定义属性实现数值插值，Safari 16.4之前的版本完全不支持@property，相关动画逻辑会被直接忽略；另外部分旧版Safari对CSS变量直接控制SVG stroke/fill 相关属性的解析存在原生bug，会导致元素无法正常渲染。
• Firefox无法触发动画：Firefox对SVG元素的CSS动画插值规则和Chrome存在差异，若你直接对<circle>元素的stroke-dasharray/stroke-dashoffset属性用CSS变量做动画，Firefox不支持对未显式声明初始值的描边相关属性做动态插值；此外Firefox 128版本才正式支持@property，低于该版本的浏览器无法识别自定义属性的动画定义，自然无法触发效果。
• 额外通用踩坑：如果你的动画用到了transform做旋转，未显式声明transform-origin: center时，不同浏览器对SVG元素的变换原点默认计算规则不同，也会导致渲染异常。

你提供的HTML代码本身没有语法问题，问题出在配套的CSS动画逻辑的兼容性上：

<div class="circle_anim rndm_01 rndm_rotate_03">
    <svg version="1.1" viewBox="0 0 285 284">
      <g class="circles">
        <circle cx="142" cy="142" r="142"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
        <circle cx="142" cy="142" r="137"></circle>
      </g>
    </svg>
  </div>

修复方案 #

• 优先替换为SMIL动画实现SVG圆形描边动画，SMIL对Safari、Firefox的兼容性远好于CSS驱动的SVG属性动画，无需依赖@property即可实现属性插值效果。
• 如果要保留CSS动画方案，需要给所有用到的描边相关属性显式设置初始值，不要依赖浏览器默认值；同时可通过JS做特性检测，判断浏览器是否支持@property，不支持的场景降级到静态样式或者SMIL方案。
• 所有用到变换的SVG元素统一显式声明transform-origin: center，避免不同浏览器默认值差异导致的偏移问题。

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