获取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画布的边缘,并注意屏幕空间角落留在看不见的点上.