SVG: Getting the position of an element relative to the page

Question

I want to display an overlay (html div) when a user clicks on an element in an SVG diagram. To visualize the problem I\'m having, suppose that the SVG image has a horizontal row

Answer 1

In case you haven't worked something out since March (and for anyone else having this problem), try getBoundingClientRect() on your SVG node.

Returns a ClientRect object that gives you top, bottom, left, right, width, and height relative to the document. Was able to use this to position Twitter Bootstrap popovers (divs) next to SVG rects.