How can I animate an svg icon on hover?

Question

I work with Elementor theme on WordPress and want to animate an svg-arrow on hover but I have problems to do that. When I hover a box the arrow should become longer (see pictures). Any help appreciated. Thanks.

Normal state arrow

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

Hover State

<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

The arrow is drawn in double lines so it is impossible to make an animation by changing the attributes stroke-dasharray and stroke-dashoffset

Consider animating the d path attribute
To do this, you need the initial path of the short arrow and the final patch of the long arrow.

For the animation to work correctly, it is necessary that the number of nodal points and their type be the same in both patches

To fulfill these conditions, you need to load the first patch into the vector editor and extend the arrow by dragging the node points

Copy the long arrow patch to another SVG file. And write the animation formula for the attribute d

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

Below is the full code

 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>

Option with dasharray arrow

 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>