获取矩形元素的屏幕像素坐标

Question

我正在尝试通过JavaScript获取SVG矩形的屏幕像素坐标。 当矩形被点击时，可以使用 getBBox() 方法得到其宽度、高度、x 和 y 位置。

但是这些位置是原始位置，我想要的是屏幕位置。

例如，如果我操作整个SVG的viewBox，则这些getBBox()坐标不再与屏幕像素相同。是否有一种函数或方法可以考虑当前viewBox和svg元素的像素大小来获取这些坐标？

- Matthias

Answer 1

演示：http://phrogz.net/SVG/screen_location_for_element.xhtml

var svg = document.querySelector('svg');
var pt  = svg.createSVGPoint();
function screenCoordsForRect(rect){
  var corners = {};
  var matrix  = rect.getScreenCTM();
  pt.x = rect.x.animVal.value;
  pt.y = rect.y.animVal.value;
  corners.nw = pt.matrixTransform(matrix);
  pt.x += rect.width.animVal.value;
  corners.ne = pt.matrixTransform(matrix);
  pt.y += rect.height.animVal.value;
  corners.se = pt.matrixTransform(matrix);
  pt.x -= rect.width.animVal.value;
  corners.sw = pt.matrixTransform(matrix);
  return corners;
}

紫红色的方块是位于HTML元素中的绝对定位的div，使用屏幕空间坐标。当你拖动或调整矩形时，将调用此函数并移动四个角落的div（第116-126行）。请注意，即使矩形处于任意嵌套转换中（例如蓝色矩形）并且SVG被缩放（调整浏览器窗口大小），此功能也能正常工作。

为了好玩，将其中一个矩形拖到SVG画布的边缘，注意屏幕空间角落仍然位于看不见的点上。

- Phrogz

---

太棒了！简单明了，一针见血。如果可以的话，我很乐意再添加更多点赞，因为它非常有用。 - RushPL

抱歉让这个问题重蹈覆辙，但我目前正在尝试获取SVG元素的屏幕坐标，并且想知道是否可以从上面的示例中获取X/Y坐标。 - k.ken

@k.ken 这就是可用代码提供的内容。一个 JavaScript 对象，其中包含四个属性，每个属性都是带有 x 和 y 坐标的 SVG 点。 - Phrogz

谢谢回复。这些坐标不是相对于SVG的，而是屏幕坐标？我的问题是关于如何根据矩形的角点坐标获取单个点（中心点）。一个快速的计算方法是使用西北和东南坐标点来获取中心坐标。再次感谢您的回复和发布答案。 - k.ken

现在你可以直接使用 element.getBoundingClientRect()。 - Dylan Maxey

Answer 2

你也可以检查elm.getScreenBBox()方法是否存在，它做的就是字面意思。它在SVG Tiny 1.2中定义。 点击这里查看文件，其中包括一个后备实现的getScreenBBox，可适用于所有浏览器。

- Erik Dahlström

---

谢谢Erik提供的这个额外的解决方案。 - Matthias

博客文章链接已失效 - "My Opera"已关闭。 - akauppi