SVG Component hover

New Here ,
Sep 16, 2022 Sep 16, 2022

Copy link to clipboard

Copied

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,

Views

116

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Sep 16, 2022 Sep 16, 2022

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 18, 2022 Sep 18, 2022

Copy link to clipboard

Copied

LATEST

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 🙂

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines