径向 SVG 渐变在悬停时没有动画

Answer 1

要在 SVG 中对径向渐变进行动画处理，您需要确保动画属性与 CSS 动画兼容。在 SVG 中，您无法使用 CSS 直接对渐变停止点的偏移属性进行动画处理。相反，您需要使用 SMIL（同步多媒体集成语言）来动画 $VG 属性。

以下是如何修改 SVG 以使用 SMIL 制作径向渐变动画：

<svg id="svgDoc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">

Answer 2

您无法通过 CSS 操作

stop

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

解决方法 1：由

begin

属性触发的 SMIL 动画

一种解决方法可能是通过 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"  /> 

解决方法 2：CSS 自定义

@property

通过定义开始和结束偏移的自定义属性，我们还可以实现平滑的渐变过渡。

@property --offset1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}


@property --offset2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 10%;
}


.gradient{
  background: radial-gradient( #FF0000 var(--offset1), #000 var(--offset2));
  transition:1s --offset1, 1s --offset2;
}

.gradient:hover{
  --offset1: 5%;
  --offset2:100%;
}

<h3>Gradient CSS</h3>
<svg id="svgDoc2" class="gradient" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
</svg>

这不适用于 CSS 变量，因为我们无法转换

background

属性本身。

在这种方法中，我们将 CSS 渐变应用于最外层（父）SVG 元素 - 就像 HTML 元素一样接受 CSS 渐变样式（与内部 SVG 元素不同）。

但是，SMIL 方法可能仍然提供最佳的跨浏览器兼容性。

另请参阅：

• “mdn 文档：@property”
• “css-tricks：使用 @property 进行 CSS 自定义属性”
• Temani Afif 的回答：“如何使用 CSS 制作径向渐变动画？”