SVG的g元素transform过渡动画在Firefox、Safari浏览器失效如何解决

问题原因 #

Firefox、Safari浏览器的SVG渲染逻辑中，直接绑定在元素属性上的transform不属于CSS过渡的监听范围，只有通过CSS规则设置的transform值变化才会触发过渡动画。Chrome对该场景做了额外兼容，所以你之前的写法仅在Chrome中生效。

解决方案 #

核心修改逻辑 #

不要把transform直接写在<g>标签的属性上，改用CSS变量传递位移参数，在CSS样式中定义transform规则，让浏览器将其识别为可过渡的CSS属性。

具体代码修改 #

1. 修改<g>标签的写法，移除transform属性，通过style属性传入CSS变量：

{#each calcData as d}
       <g in:fade="{{delay: d.x*2}}" style="--offset-x: {d.x}; --offset-y: {d.y}">
          <circle
          cx={8}
          cy=23
          r= {3}
          stroke='#000'
          fill= '#fff'
          stroke-width='2'
          ></circle>
      </g>
{/each}

2. 修改<g>元素的CSS样式，补充transform规则和will-change属性提升兼容性：

g {
    transform: translate(var(--offset-x), var(--offset-y));
    -webkit-transition: -webkit-transform 1s linear;
    -moz-transition: -moz-transform 1s linear;
    -o-transition: -o-transform 1s linear;
    transition: transform 1s linear;
    will-change: transform;
}

修改后即可在Chrome、Firefox、Safari全平台触发正常的transform过渡动画。

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