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

You can get the position coordinate relative to the page of any element, also

function getOffset(element)
{
    var bound = element.getBoundingClientRect();
    var html = document.documentElement;

    return {
        top: bound.top + window.pageYOffset - html.clientTop,
        left: bound.left + window.pageXOffset - html.clientLeft
    };
}

var offset = getOffset(svg);
var x = offset.left;
var y = offset.top;

live demo: https://codepen.io/martinwantke/pen/rpNLWr