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月份开始没有工作(以及其他有此问题的人),请尝试getBoundingClientRect()使用您的SVG节点.

返回一个ClientRect对象,该对象提供相对于文档的上,下,左,右,宽度和高度.是否能够使用它来定位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