如何仅使用内联 SVG 在 mouseout 上反转动画 linearGradient

Question

我想在 mouseout 上的 svg linearGradient 上创建一个平滑的反向动画。这是否可能仅使用内联代码（没有 js 或 css）？

我尝试了以下代码，但在第一个鼠标悬停动画完成后，它恢复到第 1 帧，这破坏了平滑的鼠标移开效果。

在 mouseout 上我想平滑地反转 linearGradient。

<svg viewBox="0 0 360 160" width="360" height="160" id="ani">
<defs>
<linearGradient id="lightGradient">
<stop offset="0%" stop-color="red">
<animate attributeName="stop-color" values="red; gold" dur=".5s" 
fill="freeze" begin="ani.mouseover" /> 
</stop>
<stop offset="90%" stop-color="gold">
</stop>
</linearGradient>
</defs> 
<circle cx="80" cy="80" r="50" fill="url(#lightGradient)"/>
</svg>

使用 mouseout 和反向 linearGradient 实现平滑反向动画的预期结果。

Answer 1

这个怎么样。我们在 mouseenter 上以一种方式制作动画，在 mouseleave 上以相反的方式制作动画。

<svg viewBox="0 0 360 160" width="360" height="160" id="ani">
<defs>
<linearGradient id="lightGradient">
<stop offset="0%" stop-color="red">
<animate attributeName="stop-color" values="red; gold" dur=".5s" 
fill="freeze" restart = "whenNotActive" begin="ani.mouseenter" /> 
<animate attributeName="stop-color" values="gold; red" dur=".5s" 
fill="freeze" restart = "whenNotActive" begin="ani.mouseleave" /> 
</stop>
<stop offset="90%" stop-color="gold">
</stop>
</linearGradient>
</defs> 
<circle cx="80" cy="80" r="50" fill="url(#lightGradient)"/>
</svg>

如何仅使用内联 SVG 在 mouseout 上反转动画 linearGradient

How to reverse animate linearGradient on mouseout with inline SVG only

svg

inline

smil

svg-animate

svg-filters