Check whether an SVG rect is within an SVG path

user_7209812 0
Viewed 152

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?

enter image description here

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.

svg javascript
1 Answers

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.

user_2713530
Related