I’ve been building a simple map of regions using a series of SVG’s (each region is it’s own SVG), with the idea that as you hover your cursor over a region it changes colour to show the region you have selected, and if clicked, a modal opens to give some information for that region. In general it works very well, except where a couple of longer narrow regions are adjacent to some wider regions, and then the transparent part of the rectangular SVG frames of the adjacent regions overlap too much with the narrow region, and so it becomes difficult for the cursor to select that region. Certainly adjusting the z-index of the regions helps, but it also ends up moving the problem and making the adjacent regions less easy to select. So… I have two questions for the experts out there:
- Is there a way to adjust the settings on SVG’s so the transparent areas of the frame are not selectable?
- I’m thinking a better approach would probably be to have a single map image with selectable polygons within in, and I was aware there used to be a third-party stack in RW classic that could achieve this quite simply, but do you experts have bright ideas how this might be achievable in Elements?