CODEWITHSUNDEEP
svgsvg-animatesvg.js
Daiaiai
Daiaiai

Reputation: 1099

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

I'd like to do an animation to an element when hovering it. this is the way, the result shall somehow look like

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>

Upvotes: 0

Views: 1166

Answers (1)

oldboy
oldboy

Reputation: 5964

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

Upvotes: 1

Related Questions