SVG：获取元素相对于页面的位置

Question

我想在用户点击SVG图中的元素时显示叠加层（html div）。 为了可视化我遇到的问题，假设SVG图像具有6个元素的水平行。 在click事件中，我获取元素的坐标并使用它们来显示它旁边的叠加层。 问题是当我从左到右点击元素时，我注意到元素和叠加层之间的水平偏移量越来越小。 也就是说，第6个元素显示的叠加层比第一个元素更接近它。 在Chrome和FF中都会发生这种情况，这是一个问题，因为有时覆盖层会覆盖元素本身。

起初我使用的是JQuery的position（）属性，它没有表现出我上面描述的行为，但它在Chrome和Firefox中返回了非常不同的值，而且在svg元素上JQuery没有正式支持它。 所以我尝试使用DOM的标准offsetLeft和offsetTop，以及svg的x.animVal.value属性和我在网上找到的各种库，但它们都有相同的不稳定偏移问题。 我认为这是因为svg图像被缩放，所以我想找到一个svg的元素相对于包含它的实际html文档的位置。 有没有办法做到这一点？

Answer 1

如果您从3月份开始没有工作（并且对于其他有此问题的人），请在SVG节点上尝试getBoundingClientRect() 。

返回一个ClientRect对象，该对象提供相对于文档的top，bottom，left，right，width和height。 是否能够使用它来定位SVG rects旁边的Twitter Bootstrap popovers（div）。

Answer 2

jQuery的position()对SVG元素不起作用。 有一张票 。

您可以使用本机SVG方法getBBox()来获取SVG元素的位置。

例

$('svg circle')[0].getBBox();

Answer 3

你可以使用这个小函数得到相对于任何元素页面的位置坐标，也是<svg>：

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;

现场演示： https ： //codepen.io/martinwantke/pen/rpNLWr