How can I animate an svg icon on hover?
The arrow is drawn in double lines so it is impossible to make an animation by changing the attributes stroke-dasharray andstroke-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>