SVG径向渐变hover时无法触发动画问题求助

你的代码问题出在动画目标选错了——你把动画绑定到了矩形元素上，但offset是渐变里<stop>标签的属性，矩形本身没有这个属性，自然不会有动画效果。

修正后的完整代码 #

<svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
  <style><![CDATA[
    #svgDoc {
      pointer-events: all;
    }

    /* hover时给渐变的第二个stop添加动画 */
    #svgDoc:hover #svgGrad-fill-1 {
      animation: expandGradient 3000ms linear 1 normal forwards;
    }

    /* 动画修改stop的offset属性 */
    @keyframes expandGradient {
      0% {
        offset: 10%;
      }
      100% {
        offset: 100%;
      }
    }
  ]]></style>

  <defs>
    <radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)">
      <stop offset="0%" stop-color="#ff0000"/>
      <stop id="svgGrad-fill-1" offset="10%" stop-color="#000"/>
    </radialGradient>
  </defs>

  <rect width="500" height="500" rx="0" ry="0" fill="url(#svgGrad-fill)"/>
</svg>

关键修改点 #

• 动画触发目标从矩形#svgGrad改成了渐变里的第二个stop元素#svgGrad-fill-1
• 动画直接修改stop的offset属性，这样黑色渐变的边界才会从10%位置平滑过渡到100%
• 保留forwards属性，让动画结束后停在最终的100%状态

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