SVG Transform动画在Safari无法运行，求SVG 1.1兼容解决办法

问题描述 #

我制作了一个简单的SVG动画，在Chrome和Firefox中运行正常，但在Safari中完全没有动画效果。了解到这是SVG 1.1与SVG 2.0的差异导致（Safari暂不支持SVG 2.0），理论上SVG 1.1能实现这类包含缩放、旋转且时序不同的多元素动画，但尝试的所有方法都失败了。请问是否有办法让以下SVG 2.0代码在Safari这类SVG 1.1环境中正常运行，还是必须完全用CSS重写？

原始代码 #

body{
  background:#000
}

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="1.691 0 12.029 10.111" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="star1" viewBox="0 0 4 4" width="5" height="5">
    <g>
      <path transform-origin="1.5 1.5" fill="white" d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0 ; .4 ; 1" dur="3s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0 1.5 1.5; 90 1.5 1.5" keyTimes="0 ; 1" dur="1s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <symbol id="star2" viewBox="0 0 4 4" width="5" height="5">
    <g>
      <path transform="scale(0 0)" transform-origin="1.5 1.5" fill="white" d="M 0 0 C 1 1 1 2 0 3 C 1 2 2 2 3 3 C 2 2 2 1 3 0 C 2 1 1 1 0 0">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0 ; .4 ; 1" dur="3s" begin="1.5s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0 1.5 1.5; 90 1.5 1.5" keyTimes="0 ; 1" dur="1s" begin="1.5s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <use transform="matrix(1, 0, 0, 1, 2.0000000298023224, 1.0000000149011612)" xlink:href="#star1">
    <animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite"/>
  </use>
  <use transform="matrix(1, 0, 0, 1, 8.00000011920929, 2.0000000298023224)" xlink:href="#star1">
    <animate attributeName="visibility" values="hidden;visible;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite"/>
  </use>
  <use transform="matrix(1, 0, 0, 1, 10.000000149011612, 6.000000089406967)" xlink:href="#star2">
    <animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" begin="1.5s" repeatCount="indefinite"/>
  </use>
</svg>

兼容SVG 1.1的修改方案 #

不需要完全用CSS重写，只需调整SVG内部的动画语法和结构，适配Safari的SVG 1.1解析规则：

修改后的完整代码 #

body{
  background:#000
}

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="1.691 0 12.029 10.111" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="star1" viewBox="0 0 4 4" width="5" height="5">
    <g transform="translate(1.5, 1.5)">
      <path fill="white" d="M -1.5 -1.5 C -0.5 -0.5 -0.5 0.5 -1.5 1.5 C -0.5 0.5 0.5 0.5 1.5 1.5 C 0.5 0.5 0.5 -0.5 1.5 -1.5 C 0.5 -0.5 -0.5 -0.5 -1.5 -1.5">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0; .4; 1" dur="3s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0; 90" keyTimes="0; 1" dur="1s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <symbol id="star2" viewBox="0 0 4 4" width="5" height="5">
    <g transform="translate(1.5, 1.5)">
      <path fill="white" d="M -1.5 -1.5 C -0.5 -0.5 -0.5 0.5 -1.5 1.5 C -0.5 0.5 0.5 0.5 1.5 1.5 C 0.5 0.5 0.5 -0.5 1.5 -1.5 C 0.5 -0.5 -0.5 -0.5 -1.5 -1.5">
        <animateTransform attributeName="transform" type="scale" values="0 0; 1 1; 0 0" keyTimes="0; .4; 1" dur="3s" begin="1.5s" repeatCount="indefinite"/>
      </path>
      <animateTransform attributeName="transform" type="rotate" values="0; 90" keyTimes="0; 1" dur="1s" begin="1.5s" repeatCount="indefinite"/>
    </g>
  </symbol>
  <use transform="matrix(1, 0, 0, 1, 2.0000000298023224, 1.0000000149011612)" xlink:href="#star1">
    <animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite"/>
  </use>
  <use transform="matrix(1, 0, 0, 1, 8.00000011920929, 2.0000000298023224)" xlink:href="#star1">
    <animate attributeName="visibility" values="hidden;visible;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" repeatCount="indefinite"/>
  </use>
  <use transform="matrix(1, 0, 0, 1, 10.000000149011612, 6.000000089406967)" xlink:href="#star2">
    <animate attributeName="visibility" values="visible;hidden;hidden;visible;hidden;hidden" keyTimes="0;.2;.4;.6;.8;1" dur="15s" begin="1.5s" repeatCount="indefinite"/>
  </use>
</svg>

关键改动说明 #

• 替换transform-origin为translate：SVG 1.1不支持直接在元素上设置transform-origin，通过将g元素平移到原变换中心位置，后续的旋转/缩放默认以该点为中心，避免显式声明变换中心的兼容性问题。
• 调整路径坐标：配合平移后的g元素，将原路径的坐标从基于(1.5,1.5)改为基于原点，确保图形位置正确。
• 简化旋转动画参数：由于已经通过平移将中心移到原点，旋转动画无需再指定中心坐标，直接使用角度值即可。
• 移除冗余初始变换：删除了path上的transform="scale(0 0)"，完全由动画起始值控制初始状态，避免冲突。

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