Hit-test for SVG shapes

DJ_AM_Juicebox used Ask the Experts™

The browsers which have implemented parts of the SVG spec (Firefox etc) do hit-testing for us for free - if I attach a mousedown listener on an SVG object, I get notified whenever the shape is clicked. This is amazing, especially for complex polygon shapes.

I'm wondering if there's a way I can utilize this feature for a bit more hit testing. I want to know if a given rectangle intersects any of my SVG shapes.

For example, I add 3 complex polygons to my element. Now I want to know if rectangle (40, 40, 100, 100) intersects any of them. Does anyone have an idea how I could possibly hook into the already great hit-testing support available, instead of adding all this code myself?

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®


If I read that post right, it only shows intersection of rectangles, where I would need intersection of rectangles + arbitrary paths, both convex and concave.

The SVG implementations for the browsers already implement this on mouse over/down etc, I'm wondering if there was a way I could hook into that already existing functionality, otherwise I'll have to add a lot of slow code to do that checking myself, I'd rather have the native implementation run it in compiled code,

There SVG spec has a number of functions for intersections (below), but it depends on the implementation you use whether these are implemented and working.
interface SVGSVGElement
NodeList getIntersectionList ( in SVGRect rect, in SVGElement referenceElement );
NodeList getEnclosureList ( in SVGRect rect, in SVGElement referenceElement );
boolean checkIntersection ( in SVGElement element, in SVGRect rect );
boolean checkEnclosure ( in SVGElement element, in SVGRect rect );

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial