获取Rect元素的Screen Pixel坐标

Question

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

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

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

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

Answer 2

您还可以检查是否存在elm.getScreenBBox()方法，它会发出声音。它在SVG Tiny 1.2中定义。

See the files here，其中包含适用于所有浏览器的getScreenBBox后备实施。