如何实现SVG径向渐变在四角间循环平移的动画？

问题分析 #

原代码核心错误是<animateTransform>元素重复定义了type属性（同时指定translate和scale），违反SVG语法规范导致动画无法正常解析；此外关键帧变换逻辑需对齐，确保渐变圆心准确对应四角位置。

修复后的代码 #

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
  <defs>
    <radialGradient id="grad" gradientTransform="translate(-1 -1) scale(2, 2)">
      <stop offset="0%" stop-color="rgba(0, 95, 89, 0.4)"/>
      <stop offset="100%" stop-color="rgb(0,0,0)"/>
      <!-- 使用matrix类型动画，同时保留缩放并控制平移 -->
      <animateTransform
        attributeName="gradientTransform"
        type="matrix"
        values="
          2,0,0,2,-2,-2;
          2,0,0,2,0,-2;
          2,0,0,2,0,0;
          2,0,0,2,-2,0;
          2,0,0,2,-2,-2"
        dur="5s"
        begin="0s"
        repeatCount="indefinite"/>
    </radialGradient>
  </defs>
  <rect fill="url(#grad)" height="100%" width="100%"/>
</svg>

修改说明 #

1. 修正语法错误：移除重复的type属性，使用type="matrix"统一控制变换，避免SVG解析异常。
2. 关键帧对应四角：每个matrix值对应渐变到一个角落的变换：
   • 2,0,0,2,-2,-2：左上角（等价于translate(-1,-1) scale(2,2)）
   • 2,0,0,2,0,-2：右上角（等价于translate(0,-1) scale(2,2)）
   • 2,0,0,2,0,0：右下角（等价于translate(0,0) scale(2,2)）
   • 2,0,0,2,-2,0：左下角（等价于translate(-1,0) scale(2,2)）
3. 保持缩放一致：所有关键帧的缩放参数（矩阵前四位2,0,0,2）固定，仅修改平移参数（最后两位），确保渐变大小始终统一。
4. 循环逻辑：关键帧从左上角出发，依次经过右上、右下、左下，最后回到左上，形成平滑循环。

内容的提问来源于stack exchange，提问作者Mastur Gak Pake Basi