Estoy tratando de descubrir cómo verificar si un rectángulo está completamente dentro de una ruta SVG. Actualmente estoy usando la función isPointInFill() de SVG para verificar si sus puntos de esquina lo hacen. Pero como puede ver, el cuadrado rosa no está visualmente dentro de la ruta SVG, pero sus puntos de esquina sí, por lo que está etiquetado como "adentro".
Necesito algo como getIntersectionList() pero para dos elementos SVG.
¿Alguien sabe una manera de resolver esto?
Editar: Encontré una solución. En lugar de elementos Rect, usé elementos Path. Para las rutas, tengo .getTotalLength() y .getPointAtLength(); así es como puedo obtener las coordenadas de todo el contorno de cada px.
Método de fuerza bruta: clone ese elemento SVG, complete la ruta con negro (y dibuje al final). Vuelque el SVG resultante en Canvas, si algún píxel no es blanco o negro, verifique si es del color de uno de los rectos.