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

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

本文关键字：位置 相对于 获取 元素 SVG      更新时间：2023-09-26

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

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

如果您自三月以来一直没有解决问题（对于其他有此问题的人），请在SVG节点上尝试getBoundingClientRect()。

返回一个ClientRect对象，该对象提供相对于文档的顶部、底部、左侧、右侧、宽度和高度。能够使用它将Twitter引导弹出窗口（div）定位在SVG矩形旁边。

jQuery的position()不能很好地用于SVG元素。有一张票。

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

示例

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

您可以获得任何元素相对于页面的位置坐标，也可以<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

相关文章：