Ответ 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;
}
Коричневые квадраты представляют собой абсолютно позиционированные divs в элементе HTML, используя координаты экрана. Когда вы перетаскиваете или изменяете размеры прямоугольников, эта функция вызывается и перемещает угловые div по четырем углам (строки 116-126). Обратите внимание, что это работает даже тогда, когда прямоугольники находятся в произвольном вложенном преобразовании (например, в синем прямоугольнике), а SVG масштабируется (изменение размера окна браузера).
Для удовольствия перетащите один из прямоугольников с края холста SVG и обратите внимание, что углы экранного пространства остаются над невидимыми точками.