ed.blog

Yet another sandbox svg! This time we're going to list all the graphic elements that are intersected by a one-pixel rectangle positioned at the current mousepointer location.

Below is an example of a function that returns the list of elements under the broomsti^Wmousecursor by using the SVG DOM method getIntersectionList. Pass in a MouseEvent object from a mouse event handler to get a static NodeList object back.

function getInteresectedElements(evt)
{
  var rpos = svgroot.createSVGRect();
  rpos.x = evt.clientX;
  rpos.y = evt.clientY;
  rpos.width = rpos.height = 1;
  return root.getIntersectionList(rpos, null);
}

Here's an modified variant of the above running in the browser. Hovering the graphic will show the id's of the currently intersected elements. Note that to work this script requires that the SVG 1.1 DOM method getIntersectionList is implemented, which at the time of writing is not the case in Firefox or Safari. View live example.

The script that shows the intersected elements and the current mouse position can be viewed here. To use it in another svg file just download that script and add a 'script' element to the svg file you want to use it in, like this:

  ...
  <script xlink:href="showintersectedelms.js"/>
  ...