macOS Safari 15.2下动画SVG渲染异常问题求助

问题复现代码 #

页面基础样式：

body {
  margin: 0;
  background: #30363d;
}

带动画的SVG代码：

<svg width="36" height="36" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z">
    <animateTransform
      attributeName="transform"
      type="rotate"
      calcMode="linear"
      dur="0.75s"
      values="0 12 12;360 12 12"
      repeatCount="indefinite"
    ></animateTransform>
  </path>
</svg>

上述代码在除macOS平台Safari 15.2外的所有浏览器均可正常渲染，异常渲染效果如下：

问题原因 #

这是Safari 15.2版本对SMIL动画的解析兼容bug：当animateTransform动画作用的元素没有显式声明初始transform属性时，浏览器会错误计算元素的变换矩阵，最终导致路径变形、渲染错位。

修复方法 #

给执行动画的path元素显式添加初始旋转变换属性，提前告知浏览器元素的变换基准即可解决问题，修复后的SVG代码如下：

<svg width="36" height="36" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path 
    d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"
    transform="rotate(0 12 12)"
  >
    <animateTransform
      attributeName="transform"
      type="rotate"
      calcMode="linear"
      dur="0.75s"
      values="0 12 12;360 12 12"
      repeatCount="indefinite"
    ></animateTransform>
  </path>
</svg>

• 仅新增了transform="rotate(0 12 12)"属性声明初始状态，没有修改任何动画逻辑
• 该改动对Chrome、Firefox等其他浏览器的渲染无任何影响，全平台动画表现一致

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