能否用CSS动画修改HTML属性？SVG gradientTransform无限旋转实现

API 探路者

2026-6-28

实现SVG渐变的gradientTransform无限旋转动画

CSS的attr()函数只能读取属性值，没法直接修改属性来创建动画，所以要实现gradientTransform的无限旋转，推荐两种更直接的方案：

方案一：使用SVG原生`<animateTransform>`元素

这是最适配SVG的方案，无需额外JS/CSS，直接在<linearGradient>内部添加动画元素即可实现无限循环：

<defs>
  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(65)">
     <stop offset="0%" stop-color="hsl(220, 60%, 60%)" stop-opacity="1" />
     <stop offset="100%" stop-color="hsl(280, 60%, 60%)" stop-opacity="1" />
     <!-- 添加旋转动画 -->
     <animateTransform
       attributeName="gradientTransform"
       type="rotate"
       from="0"
       to="360"
       dur="8s"
       repeatCount="indefinite"
     />
  </linearGradient>
</defs>

参数说明：

attributeName="gradientTransform"：指定要动画的属性
type="rotate"：动画类型为旋转
from="0" to="360"：旋转角度从0到360度
dur="8s"：动画时长8秒（可自行调整）
repeatCount="indefinite"：设置无限循环

方案二：使用CSS动画

如果更习惯用CSS控制动画，可以给渐变元素添加CSS旋转动画，注意设置transform-origin确保旋转中心正确：

#gradient {
  animation: rotateGradient 8s linear infinite;
  transform-origin: center;
  /* 兼容部分浏览器的SVG transform */
  transform-box: fill-box;
}

@keyframes rotateGradient {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

对应的SVG代码保持原结构即可，不需要额外添加动画元素。