javascript - 获取 Rect 元素的屏幕像素坐标

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

洋红色方 block 是 HTML 元素中绝对定位的 div，使用屏幕空间坐标。当您拖动或调整矩形大小时，将调用此函数并将 Angular div 移动到四个 Angular 上(第 116-126 行)。请注意，即使矩形处于任意嵌套转换(例如蓝色矩形)并且 SVG 已缩放(调整浏览器窗口大小)时，这仍然有效。

为了好玩，将其中一个矩形拖出 SVG Canvas 的边缘，注意屏幕空间的 Angular 停留在看不见的点上。