javascript - Getting the Screen Pixel coordinates of a Rect element

Question

I am trying to get the screen pixel coordinates of a rectangle in SVG via java script. When the rectangle has been clicked, I can figure out its width, height, x and y position with getBBox().

But these positions are the original positions. I want the screen position.

For example if I manipulate the viewBox of the whole SVG, these getBBox coordinates are not any more the same than the screen pixels. Is there a function or way to get the coordinates considering the current viewBox and the pixel size of svg element?

Answer 1

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

The magenta squares are absolutely-positioned divs in the HTML element, using screen space coordinates. When you drag or resize the rectangles this function is called and moves the corner divs over the four corners (lines 116-126). Note that this works even when the rectangles are in arbitrary nested transformation (e.g. the blue rectangle) and the SVG is scaled (resize your browser window).

For fun, drag one of the rectangles off the edge of the SVG canvas and notice the screen-space corners staying over the unseen dots.