Получение координат пикселя экрана элемента Rect

Question

Я пытаюсь получить координаты пикселя экрана прямоугольника в SVG с помощью сценария Java. Когда щелкнул прямоугольник, я могу определить его ширину, высоту, положение x и y с помощью getBBox ().

Но эти позиции являются исходными позициями. Я хочу положение экрана.

Например, если я манипулирую viewBox всего SVG, эти координаты 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;
}

Пурпурные квадраты - это абсолютно позиционные элементы div в элементе HTML, использующие координаты экранного пространства. При перетаскивании или изменении размера прямоугольников эта функция вызывается и перемещает угловые делители по четырем углам (строки 116-126). Обратите внимание, что это работает, даже когда прямоугольники находятся в произвольном вложенном преобразовании (например, синий прямоугольник), а SVG масштабируется (изменяет размер окна браузера).

Для развлечения перетащите один из прямоугольников за край SVG-холста и обратите внимание, что углы пространства экрана остаются над невидимыми точками.

Answer 2

Вы также можете проверить существование метода elm.getScreenBBox(), который делает то, на что это похоже. Это определено в SVG Tiny 1.2 .

См. Файлы здесь , которые включают в себя резервную реализацию getScreenBBox, которая должна работать во всех браузерах.