Hover states on SVG icons

I’m having an issue that seems like it should be easily solvable, but I’ve had no luck, so I’m hoping one of you can help.

The use case is pretty simple. I want to have an SVG icon that links to Instagram, and when hovered, changes colour. Easy, right?

So what I’ve done is embedded the hover action within the SVG and included it on the page as an HTML element. I can’t create a link out of the HTML element, so the tag is also within the SVG.

Cool. It works: http://stupid-svg-nonsense.webflow.io/

Here’s the problem. Because the <a> tag refers only to the curves, anything transparent is not included, so the “hitbox” for the icon feels a bit random. I could theoretically put a black square in the back of the SVG, but that’s not particularly elegant, since there’s a texture in the background (of the real site, not this one). When the transparent areas aren’t linked, the interface feels like there’s a weird error.

So, unless I’m missing something, it seems that my options are dropping in the SVG as a linkable block and losing the mouseover, including the <a> tag in the code and losing the ability to adjust the hit area, or not using webflow for this.

SVG is the de facto standard for icons in web design, and good design dictates that there should be feedback on mouseovers, so I feel like I can’t be the only person to ever try this. I’m surprised that a product with such a robust set of features wouldn’t have an easy way of doing this. Can someone help me?

Thanks,

Ryan

Check the pointerevent property with the boundingbox value:

https://www.w3.org/TR/SVGTiny12/interact.html#PointerEventsProperty

1 Like

That worked! Though it took a bit of frustration before I realized that the boundingBox was changed to bounding-box.

https://www.w3.org/TR/SVG2/interact.html#PointerEventsProp

Thank you! That might have driven me crazy.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.