Как я могу анимировать стрелку SVG при наведении курсора?
Я работаю с темой 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.
Ответы (1 шт):
Стрелка нарисована двойными замкнутыми линиями, поэтому невозможно сделать анимацию изменения длины с помощью изменения атрибутов 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.