Javascript 在SVG中悬停时更改渐变背景

我想用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> 

---

我想更改悬停时的这些渐变。我该怎么做？可以在上找到我的完整程序。

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

但是，这可以在CSS/SCSS中通过改变填充梯度URL on:hover来实现

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

请参见上的David Picksley（）笔

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