有人可以告诉我为什么我的径向渐变 SVG 悬停时没有动画吗？

Answer 1

您无法通过 CSS 操作

stop

属性，因为它与同名的 CSS offset-path 相关属性发生“冲突”。

一种解决方法可能是通过 SMIL 动画对渐变进行动画处理，如下所示：

<h3>Hover me</h3>
<svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <defs>
    <radialGradient id="svgGrad-fill" cx="0" cy="0" r="0.5" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="translate(0.5 0.5)">
      <stop id="svgGrad-fill-0" offset="0%" stop-color="#ff0000" />
      <stop id="svgGrad-fill-1" offset="10%" stop-color="#000" >
           <animate attributeName="offset" fill="freeze" values="0.1;1" dur="1s" repeatCount="1" begin="svgGrad.mouseover"  /> 
           <animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout"  /> 
      </stop>
    </radialGradient>
  </defs>

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

幸运的是，SVG 的

<animate>

元素允许您 添加事件以开始（或停止）播放。请参阅 “mdn 文档：开始”

<animate attributeName="offset" fill="freeze" values="1;0.1" dur="1s" repeatCount="1" begin="svgGrad.mouseout"  />