I am currently developing an SVG drawing application and have implemented a tool that enables users to select all shapes within a rectangular area.
However, I am facing the challenge of detecting the SVG shapes located underneath the selected rectangle.
I initially tried using "document.elementFromPoint" and "getIntersectionList" on my root SVG element. By setting the fillColor of a path SVG object to none, I attempted to display a line for selection purposes. Unfortunately, getIntersectionList was selecting the path even when it was over the invisible region, rendering it ineffective. Additionally, "document.elementFromPoint" was not suitable for cases where scrolling is involved.
Considering these limitations, my current idea involves generating click events on each pixel within the selected area and listening for those events to determine the shapes present.
If you have any suggestions or guidance on how to achieve this efficiently, I would greatly appreciate your input.
Edit: To provide further clarity, please refer to the illustration linked here. In the image, the white square represents the selection area, with the requirement being that items beneath it should be highlighted in red. The square dynamically follows the mouse cursor, and if moved away from lines, they should revert back to their original appearance.