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

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

但是，可以通过更改：hover上的填充渐变URL来在CSS / SCSS中完成此操作

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

请参阅xmwOPe上的David Picksley（@Picksley）的钢笔CodePen。

我本来可以完成代码的内部嵌入，但是MorphSVG会在CodePen的库之外的任何地方引发错误

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

1 个答案: