javascript - 在 MorphSVG 中悬停时更改渐变背景

Question

我想使用 MorphSVG 库创建变形动画。

我定义了两个渐变:

<linearGradient id="lgrad" x1="0%" y1="100%" x2="100%" y2="0%" > 
  <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</linearGradient>

<linearGradient id="lgrad-1" x1="12%" y1="100%" x2="88%" y2="0%" > 
  <stop offset="0%" style="stop-color:rgb(153,218,255);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(0,128,128);stop-opacity:1" />
</linearGradient> 

我想在悬停时更改这些渐变。我怎样才能做到这一点？我的完整程序可以在 codepen 上找到.

Answer 1

可能不是您想要的最佳答案...

但是，这可以在 CSS/SCSS 中通过更改 :hover 上的填充渐变 URL 作为替代方案来完成

#bean-2:hover {
  fill: url('#lgrad-1');
}

请参阅笔 xmwOPe作者:David Picksley ( @Picksley ) CodePen .

我本来可以进行代码的内部嵌入，但 MorphSVG 在 CodePen 库之外的任何地方都会抛出错误