SVG-animation on hover - first steps, how to?

Question

I'd like to do an animation to an element when hovering it.

As I do use svg-elements for both situations (standard and hover-state) I guess I must somehow manipulate the first svg-element when hovering it by editing the svg-code inline.

I basically'd need a starting point there: How would I "redraw" in an animated manner the hover-image and not just swap it? Do I need a 3rd party library (which)? If I had multiple of these situations, how would I keep my code clean by not having 10 svg-codes inline within my html-source?

Thanks for your answer(s)!

The code for the svg-image(s) is here

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800">
    <defs><style>.cls-1,.cls-2{fill:none;stroke:#000;}.cls-1{stroke-miterlimit:10;stroke-width:7px;}.cls-2{stroke-linejoin:bevel;stroke-width:5px;}</style></defs>
    <title>arrows_demoZeichenfläche 1</title>
    <line class="cls-1" x1="325.5" y1="333" x2="325.5" y2="539"/>
    <polyline class="cls-2" points="242 455.67 325.75 539.42 409.42 455.75"/><path class="cls-1" d="M670.5,135.79c0,11.62-8,11.73-8,23.35s8,11.68,8,23.3-8,11.65-8,23.28,8,11.64,8,23.26-8,11.63-8,23.25,8,11.63,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25v31"/>
    <polyline class="cls-2" points="587 455.67 670.75 539.42 754.42 455.75"/></svg>

Look at greensock ... but do you really want a huge library for a state that will not work on touch devices? How to swap on hover depends on how you use the svg on the page: inline svg, img, background image. Can do using only css or via js. — Ruskin, Jan 25 '17 at 14:56

oldboy · Answer 1 · 2017-02-15T05:03:47.023

You could use JavaScript to manipulate the value of the points attribute, but such changes would be sudden, so the change would look like a stop motion film.

Like this Codepen, what you could do is give a path element a stroke-dasharray that is equal to the getTotalLength of the path in order to "erase" the straight line (of the arrow) off the page, then quickly switch the value of the d attribute, and then "redraw" the line back onto the page?

However, I don't believe that's what you're looking for. I believe HTML5 Canvas, with my limited knowledge about it, would be the more feasible option for what you're trying to accomplish.

Actually, I guess it might be possible using a CSS3 3D transform, like so. The problem, however, is that the line doesn't have any depth, so when you initially set rotateX(90deg) on the path in CSS the line becomes invisible instead of appearing as a straight line...

SVG-animation on hover - first steps, how to?

1 Answers1