Javascript 获取Rect元素的屏幕像素坐标

我试图通过java脚本获得SVG中矩形的屏幕像素坐标。 单击矩形后，我可以使用getBBox（）计算其宽度、高度、x和y位置

但这些立场是原来的立场。我想要屏幕的位置

例如，如果我操纵整个SVG的viewBox，这些getBBox坐标与屏幕像素并不相同。是否有一个函数或方法来获取 考虑当前视口和svg元素像素大小的坐标？

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

---

为了好玩，将其中一个矩形从SVG画布的边缘上拖下来，并注意屏幕空间的角停留在看不见的点上。

您还可以检查是否存在

elm.getScreenbox（）

方法，该方法听起来像什么。它的定义是

---

，其中包括一个应能在所有浏览器中运行的

getScreenBBox

的回退实现。

感谢Erik提供此附加解决方案BlogPost链接不再工作-“My Opera”已关闭。回答得好！简明扼要。如果我能这么有用的话，我很乐意添加更多的点。很抱歉让这个问题复活了，但我目前正在尝试获取svg元素的屏幕坐标，并且很好奇是否可以从示例中获取X/Y坐标above@k.ken这就是able代码给你的。一个具有四个属性的JavaScript对象，每个属性都是一个具有x，y坐标的SVG点。感谢回复。坐标不是相对于svg的，对吗？只是屏幕坐标？我的问题是为了得到矩形的一个点（中间），知道它的角坐标。使用nw和se坐标点进行快速计算。得到中间坐标。感谢您再次回复，并感谢您发布此答案

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;
}