Как я могу анимировать значок SVG при наведении курсора?

Question

Я работаю с темой Elementor на WordPress и хочу анимировать svg-arrow на hover, но у меня есть проблемы с этим. При наведении курсора на стрелку должна становиться длиннее (см. Рисунки). Любая помощь приветствуется. Спасибо.

Стрелка нормального состояния

<div id="arrow-normal">
    <svg width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M13.2531 0.208125C12.985 -0.069375 12.5387 -0.069375 12.2612 0.208125C11.9931 0.47625 11.9931 0.9225 12.2612 1.19L17.2906 6.21938H0.694375C0.3075 6.22 0 6.5275 0 6.91437C0 7.30125 0.3075 7.61875 0.694375 7.61875H17.2906L12.2612 12.6388C11.9931 12.9163 11.9931 13.3631 12.2612 13.6306C12.5387 13.9081 12.9856 13.9081 13.2531 13.6306L19.4731 7.41062C19.7506 7.1425 19.7506 6.69625 19.4731 6.42875L13.2531 0.208125Z" fill="white"/>
    </svg>
</div>

Состояние наведения

<div id="arrow-hover">
    <svg width="40" height="14" viewBox="0 0 40 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M33.2531 0.208125C32.985 -0.069375 32.5387 -0.069375 32.2612 0.208125C31.9931 0.47625 31.9931 0.9225 32.2612 1.19L37.2906 6.21938H0.694375C0.3075 6.22 0 6.5275 0 6.91437C0 7.30125 0.3075 7.61875 0.694375 7.61875H37.2906L32.2612 12.6388C31.9931 12.9163 31.9931 13.3631 32.2612 13.6306C32.5387 13.9081 32.9856 13.9081 33.2531 13.6306L39.4731 7.41062C39.7506 7.1425 39.7506 6.69625 39.4731 6.42875L33.2531 0.208125Z" fill="white"/>
    </svg>
</div>

Answer 1

Стрелка нарисована в виде двух линий, поэтому анимацию невозможно создать, изменив атрибуты stroke-dasharray и stroke-dashoffset

Попробуйте анимировать атрибут d path
. Для этого вам понадобится начальная path короткой стрелки и последний патч длинной стрелки.

Чтобы анимация работала правильно, необходимо, чтобы количество узловых точек и их тип были одинаковыми в обоих патчах

Чтобы выполнить эти условия, вам необходимо загрузить первый патч в векторный редактор и растяните стрелку, перетаскивая узлы точек

Скопируйте патч длинной стрелки в другой файл SVG. И напишите формулу анимации для атрибута d

<animate id="_animate"
       attributeName="d"
       begin="indefinite"
       dur="2s"
       repeatCount="3"
       values="
       path-short-arrow;
       path-long-arrow"
       fill="freeze"

Ниже приведен полный код

var svg = document.getElementById('block');
svg.addEventListener("mouseover",() =>{
  _animate.beginElement();
})

#block {
 position: relative;
 width:40ww;
 height:auto;
 max-width:450;
 
 background-color: #1D4976;
 }
 #arrow-normal {
 
 padding:1.5em;

 }
 #svg1 { 
 position: absolute;
 bottom:30px;
 right:50px;
 
  }
 #path {
 fill:white;
 stroke-width:2;
 stroke:white;
 } 
 .text1 {
padding-top:14px;
display:inline-block;
 font-size:26px;
 color:white;
 }
  .text2 {
padding-top:60px;
display:inline-block;
 font-size:22px;
 color:white;
 }

<div id="block">
   
<div id="arrow-normal"> 
   <span class="text1"> Fusce ultricies maximus ante vitae imperdiet. Proin magna orci pretium nec  </span>
    <span class="text2"> Nullam ornare turpis quis orci </span>
 <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="16" viewBox="0 0 50 16" version="1.1" fill="none">
  <path id="path" d="m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z" >
     <animate id="_animate"
	   attributeName="d"
	   begin="indefinite"
	   dur="2s"
	   repeatCount="2"
     restart="whenNotActive"
	   values="
	   m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z;
	   m42.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H46.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z;
	   m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z"
	   fill="freeze" />
  </path>
</svg>
</div>
 </div>

Опция со стрелкой из тире

 var svg = document.getElementById('block');
svg.addEventListener("mouseover",() =>{
  _animate.beginElement();
})

#block {
 position: relative;
 width:40ww;
 height:auto;
 max-width:450;
 
 background-color: #1D4976;
 }
 #arrow-normal {
 
 padding:1.5em;

 }
 #svg1 { 
 position: absolute;
 bottom:30px;
 right:50px;
 stroke-dasharray:4 1;
 
  }
 #path {
 fill:white;
 stroke-width:2;
 stroke:white;
 } 
 .text1 {
padding-top:14px;
display:inline-block;
 font-size:26px;
 color:white;
 }
  .text2 {
padding-top:60px;
display:inline-block;
 font-size:22px;
 color:white;
 }

<div id="block">
   
<div id="arrow-normal"> 
   <span class="text1"> Fusce ultricies maximus ante vitae imperdiet. Proin magna orci pretium nec  </span>
    <span class="text2"> Nullam ornare turpis quis orci </span>
 <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="16" viewBox="0 0 50 16" version="1.1" fill="none">
  <path id="path" d="m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z" >
     <animate id="_animate"
	   attributeName="d"
	   begin="indefinite"
	   dur="2s"
	   repeatCount="2"
     restart="whenNotActive"
	   values="
	   m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z;
	   m42.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H46.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z;
	   m14.7 1.4c-0.3-0.3-0.7-0.3-1 0-0.3 0.3-0.3 0.7 0 1l5 5H2.1c-0.4 0-0.7 0.3-0.7 0.7 0 0.4 0.3 0.7 0.7 0.7H18.7l-5 5c-0.3 0.3-0.3 0.7 0 1 0.3 0.3 0.7 0.3 1 0l6.2-6.2c0.3-0.3 0.3-0.7 0-1z"
	   fill="freeze" />
  </path>
</svg>
</div>
 </div>