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

如果您从三月开始没有工作（以及其他有此问题的人），请在您的SVG节点上尝试getBoundingClientRect()。

返回一个ClientRect对象，该对象提供相对于文档的上，下，左，右，宽度和高度。能够使用它来定位SVG rects旁边的Twitter Bootstrap popovers（div）。

Answer 2

jQuery＆＃39; position()对SVG元素不起作用。对此有a ticket。

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

实施例

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

Answer 3

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

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

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

3 个答案:

实施例