Я пытаюсь получить пиксельные координаты экрана прямоугольника в SVG через java script. Когда щелкнул прямоугольник, я могу определить его ширину, высоту, положение x и y с помощью getBBox().
Но эти позиции являются исходными позициями. Я хочу положение экрана.
Например, если я манипулирую viewBox всего SVG, эти координаты getBBox больше не похожи на пиксели экрана. Есть ли функция или способ получить координаты с учетом текущего viewBox и размера пикселя элемента svg?
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 и обратите внимание, что углы экранного пространства остаются над невидимыми точками.
Вы также можете проверить существование метода elm.getScreenBBox(), который делает то, на что это похоже. Он определен в SVG Tiny 1.2.
Смотрите здесь файлы, которые включают резервную реализацию getScreenBBox, которая должна работать во всех браузерах.