SVG Component hover

Question

Hi,

I'm trying to do hover state for SVG components. Howver it seems that the hover state is triggered by bounding box instead of the svg boundary. When there are multiple svg objects that have overlapping bounding box, objects that are inside another's bounding box is not hovered (the hovered bouding box is hovered instead.) I've attached an image below.

Best Regards,

Spas K. · Answer

Hey there. Unfortunately, Xd applies the actions to the bounding box. It will not limit the trigger to the exact path of the SVG (or shape).

You can do the following - create one big component for the whole map, and make different hover states for each highlighted object on the map. Then create invisible rectangles roughly the size of the object inside each object's borders, to trigger the hover effects, but making sure they don't overlap. You could have multiple rectangles that trigger the same hover if the shape is too irregular. Then you would wire each object's boxes to trigger that object's hover state on the main component holding the map.

It will not be perfect, but it will be okay for a simulation on how it should work.

If you don't understand what I mean, let me know and I'll try to make an example for you 🙂

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded