2

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

Стрелка в исходном состоянии:

введите сюда описание изображения

<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>

Как сделать это? Любая помощь приветствуется.

Свободный перевод вопроса How can I animate an svg icon on hover? от участника @Tom.

3
  • ассоциация:stackoverflow.com/q/60955939/7394871 1 апр 2020 в 13:56
  • 1
    Можете вернуть, но в целом к WP вопрос не имеет отношения. А решение красивое, спасибо! 1 апр 2020 в 14:04
  • Вопрос не имеет никакого отношения к ВП. Абсолютно!
    – SeVlad
    2 апр 2020 в 8:20

1 ответ 1

7

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

введите сюда описание изображения

В этом случае, обдумайте вариант анимации атрибута d path

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

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

введите сюда описание изображения

Копируем патч длинной стрелки в другой файл SVG.

И пишем формулу анимации атрибута d

<animate id="_animate"
       attributeName="d"
       begin="indefinite"
       dur="2s"
       repeatCount="3"
       values="
       path-short-arrow;
       path-long-arrow;
       path-short-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>

Свободный перевод ответа How can I animate an svg icon on hover? от участника @Alexandr_TT.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.