能否为SVG线性渐变的gradientTransform属性添加动画？附示例代码

当然可以给SVG线性渐变的gradientTransform属性添加动画效果！不管是用SVG原生动画元素还是CSS动画都能轻松实现，我结合你提供的代码片段，给你两种具体的实现方案：

这种方法兼容性极佳，是纯SVG场景下的首选方案。你可以直接在<linearGradient>标签内添加<animate>元素，指定要动画的属性、起止状态和动画参数。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 260 260">
  <style>
    .class1 { fill-opacity:1; fill:url(#grayGradient); }
  </style>
  <defs>
    <linearGradient id="grayGradient" gradientUnits="userSpaceOnUse" x1="0" y1="130" x2="260" y2="130">
      <stop offset="0" style="stop-color:#919191;stop-opacity:1;" />
      <stop offset="1" style="stop-color:#c1c1c1;stop-opacity:1;" />
      <!-- 给渐变添加旋转动画：围绕SVG中心无限循环旋转 -->
      <animate
        attributeName="gradientTransform"
        from="rotate(0 130 130)"
        to="rotate(360 130 130)"
        dur="5s"
        repeatCount="indefinite"
        linear="true"
      />
    </linearGradient>
  </defs>
  <!-- 绘制外圈图形，应用渐变填充 -->
  <circle class="class1" cx="130" cy="130" r="120" stroke="#000" stroke-width="2" />
</svg>

参数说明：

• attributeName="gradientTransform"：指定要动画的目标属性
• from/to：定义变换的起始和结束状态（这里是围绕SVG中心(130,130)旋转0到360度）
• dur="5s"：动画时长为5秒
• repeatCount="indefinite"：让动画无限循环
• linear="true"：保持匀速动画效果

如果想要平移渐变的效果，可以把<animate>换成：

<animate
  attributeName="gradientTransform"
  from="translate(0 0)"
  to="translate(260 0)"
  dur="3s"
  repeatCount="indefinite"
  alternate="true"
/>

alternate="true"会让动画来回播放，实现渐变左右往复移动的效果。

如果你习惯用CSS管理动画，也可以通过CSS的@keyframes来实现，适合需要和网页其他CSS动画统一控制的场景。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 260 260">
  <style>
    .class1 { fill-opacity:1; fill:url(#grayGradient); }
    
    /* 定义渐变旋转的CSS动画 */
    @keyframes gradientSlide {
      0% {
        gradient-transform: translate(0, 0);
      }
      100% {
        gradient-transform: translate(260px, 0);
      }
    }
    
    /* 给渐变应用动画 */
    #grayGradient {
      animation: gradientSlide 3s linear infinite alternate;
      transform-origin: center;
      /* 部分旧浏览器可能需要添加前缀：-webkit-gradient-transform */
    }
  </style>
  <defs>
    <linearGradient id="grayGradient" gradientUnits="userSpaceOnUse" x1="0" y1="130" x2="260" y2="130">
      <stop offset="0" style="stop-color:#919191;stop-opacity:1;" />
      <stop offset="1" style="stop-color:#c1c1c1;stop-opacity:1;" />
    </linearGradient>
  </defs>
  <circle class="class1" cx="130" cy="130" r="120" stroke="#000" stroke-width="2" />
</svg>

两种方法各有优势：SVG原生动画兼容性更广泛，适合独立的SVG文件；CSS动画则更灵活，能和网页的其他样式体系融合。你可以根据自己的使用场景选择。

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