I am trying to figure out how to check if a rectangle is fully within an SVG path. Currently I am using SVGs isPointInFill() function to check if its corner points do so. But as you see, the pink square is visually not within the SVG path – but its corner points are, so it is labeled as "inside".
I need something like getIntersectionList() but for two SVGelements.
Does anyone knows a way to figure this out?
Edit: I found a solution. Instead of Rect elements, I used Path elements. For paths I have .getTotalLength() and .getPointAtLength() – thats how I can get coords of the whole outline for each px.
Brute force method - clone that SVG element, fill the path with black (and draw it last). Dump the resulting SVG into Canvas, if any pixels aren't white or black, check to see if they're the color of one of the rects.