Изменить градиентный фон при наведении в 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, изменив URL градиента заполнения на: hover

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

См.Перо xmwOPe Дэвида Пиксли ( @ Picksley ) на CodePen .

Я бы сделал внутреннее встраивание кода, но MorphSVG выдает ошибкув любом месте, кроме библиотеки CodePen