SVG Component hover

[Raven26151204ut6e]

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,

[HARSHIKA_VERMA]

Hi @Raven26151204ut6e,

Thank you for reaching out. We would request you to please share the version of XD and the operating system details. Is it possible for you to share the screenshot of your design in prototype mode showing the wiring? 

We will try our best to help.

Thanks,

Harshika

[Spas K.]

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 🙂