I'm working with an SVG and have added custom hover and click styles directly in the stylesheet. I’ve applied these styles individually to each element within the SVG so that each elements highlights on hover independently, rather than applying a blanket effect to the entire SVG. I’d like to take this a step further by adding unique click actions to each element. I'd like to trigger pop-ups or navigate to new views when an element is clicked.
I considered overlaying custom-shaped transparent buttons on each element to simulate clickable areas but the button shape doesn’t match the elements unique shape precisely. I also tried using onClick script on the SVG component, intending to detect which specific element was clicked based on its id but that doesn't seem to be possible.
Is there a method to directly interact with elements within an SVG individually for navigation or pop-up actions? Or would layering components be the only feasible solution?
I dealt with a similar problem, and I’m curious if it’s possible to solve it using a single SVG. My solution was to overlay the SVG with buttons. For more complex shapes, I layered additional SVGs over the base SVG and responded to the on-click event.
I think @victordcq has a module to do what you want. Otherwise using overlays or breaking out the SVG is the only way. In your case I think I would just break out the SVG into multiple SVGs.
I did make a module too, but i also made a simpler js injected version.
If i remember correctly, it catches the most specific name property of the svg elements and writes it to a view.custom prop. where you can handle your "onclick" event in the onchange of this property.
Not the id property as asked, so you will have to add all of those, limitation by perspective sadly.
