Hit-testing SVG shapes?

javascript svg hittest
user246114 picture user246114 · Feb 1, 2010 · Viewed 17k times · Source

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?

Thanks

Answer

Erik Dahlström picture Erik Dahlström · Feb 1, 2010

The SVG 1.1 DOM has just the right method (unfortunately it's not yet implemented in mozilla):

var nodelist = svgroot.getIntersectionList(hitrect, null);

For a full working example see here.

Related questions

Convert SVG to image (JPEG, PNG, etc.) in the browser

I want to convert SVG into bitmap images (like JPEG, PNG, etc.) through JavaScript.

Read More
How to use z-index in svg elements?

I'm using the svg circles in my project like this, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120"> <g> <g id="one"> <circle fill="green" cx="100" cy="105" r="20" /> </g> <…

Read More
How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More