Блог

Я пытаюсь анимировать SVG с линейным градиентом, и я немного борюсь с его продолжительностью. Итак, рациональным здесь является то, что у меня есть 2 разных цвета (градиент), и при наведении на родительский компонент я запускаю или останавливаю анимацию.

 <linearGradient id="prefix__d" x1="95.55%" x2="6.387%" y1="50%" y2="50%">
   <stop offset="0%" stopColor="#0975E0" >
      <animate id="a1" attributeName="stop-color" values="#0975E0; #114BD5" begin="0; a2.end" dur={animationSpeed} />
      <animate id="a2" attributeName="stop-color" values="#114BD5; #0975E0" begin="a1.end" dur={animationSpeed} />
   </stop>
   <stop offset="100%" stopColor="#114BD5" >
     <animate id="a3" attributeName="stop-color" values="#114BD5; #0975E0" begin="0; a4.end" dur={animationSpeed} />
       <animate id="a4" attributeName="stop-color" values="#0975E0; #114BD5" begin="a3.end" dur={animationSpeed} />
   </stop>
 </linearGradient>
  

Начальная скорость анимации равна 0, так как я хочу анимировать ее только тогда, когда пользователь наведет курсор мыши на мою кнопку.

 const [hoverSpeed, setHoverSpeed] =  useState('0');
  

и я меняю значение здесь

 <Element 
    id={id}
    href={href}
    target={target}
    onMouseEnter={() => setHoverSpeed('1s')}
    onMouseLeave={() => setHoverSpeed('0')}
    data-speed={hoverSpeed} // just for debugging
  >
  

Дело в том, что, похоже, он не «повторно отображает» анимацию из ее начального значения. Я попытался сделать наоборот, начиная с ‘1s’ и меняя на 0, и это также не остановило анимацию.

Как я могу добиться чего-то подобного?

Спасибо.

Обновить

Я попробовал другой подход, который не сработал. Возможно, я неправильно реализовал. У меня есть фиксированное значение для продолжительности анимации, и у меня есть условный рендеринг для тега animate.

 const [active, setActive] =  useState(false);

onMouseEnter={() => setActive(true)}
onMouseLeave={() => setActive(false)}

{active amp;amp; (
   <>
      <animate id="a1" attributeName="stop-color" values="#0975E0; #114BD5" begin="0; a2.end" dur='1s' />
      <animate id="a2" attributeName="stop-color" values="#114BD5; #0975E0" begin="a1.end" dur='1s' />
   </>
)}