i have a svg with a lot of <rect> elements that i want to overlay on an identically sized image so that there are clickable areas on the image.
Each of these items must display a div unique to the detail in the image that appears to have been clicked.
there are a lot of <rect> elements and I would prefer not to do this by hand as by manually editing the code. i basically want to create a device to simplify this process as i have a lot of images for it.
my two thoughts are in the second.
click on the areas of the svg and enter the name of this factor in an input field. the device parses the svg and recognizes which <rect> the mouse x,y is in, and then possibly uses regex to append an identification to the <rect> that matches the name entered. o could i make that clickable?
otherwise https://9apps.ooo/ ,
2. i was wondering if i could somehow append <rect> elements with the name inside after the corresponding <rect> area in the svg okay, position them all in the same place and use css to make each element opaque one at a time make region.
this again depends on me being able to click individual <rect> elements in the svg as I haven't managed to do that yet.
any help or pointers here would be greatly appreciated.
Thank you!