获取 Rect 元素的屏幕像素坐标答案

【问题标题】：Getting the Screen Pixel coordinates of a Rect element获取 Rect 元素的屏幕像素坐标
【发布时间】：2011-08-15 14:42:08
【问题描述】：

我正在尝试通过 java 脚本获取 SVG 中矩形的屏幕像素坐标。单击矩形后，我可以使用 getBBox() 计算出它的宽度、高度、x 和 y 位置。

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

例如，如果我操作整个 SVG 的 viewBox，这些 getBBox 坐标与屏幕像素不再相同。有没有获得的功能或方法考虑当前 viewBox 和 svg 元素像素大小的坐标？

【问题讨论】：

标签： javascript svg

【解决方案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 画布的边缘，并注意屏幕空间的角落停留在看不见的点上。

【讨论】：

很好的答案！简单明了。如果我能这么有用的话，我很乐意加分。
很抱歉让这个问题重获新生，但我目前正在尝试获取 svg 元素的屏幕坐标，并且很好奇是否可以从上面的示例中获取 X/Y 坐标
@k.ken 这就是able code给你的。一个具有四个属性的 JavaScript 对象，每个属性都是一个带有 x,y 坐标的 SVG 点。
感谢您的回复。坐标不是相对于svg的吧？只是屏幕坐标？我的问题是针对知道其角坐标的矩形获得一个点（中间）。快速计算是使用 nw 和 se 坐标点得到它。这得到了中间坐标。感谢您再次回复并感谢您发布此答案

【解决方案2】：

您还可以检查elm.getScreenBBox() 方法是否存在，这听起来像。它在SVG Tiny 1.2 中定义。

See the files here，其中包括应在所有浏览器中工作的getScreenBBox 的后备实现。

【讨论】：

感谢 Erik 提供的额外解决方案
博文链接不再有效 - “我的歌剧”已关闭。