SVG: получение позиции элемента относительно страницы

Я хочу отобразить оверлей (html div), когда пользователь нажимает на элемент в диаграмме SVG. Чтобы визуализировать проблему, которую я имею, предположим, что изображение SVG имеет горизонтальную строку из 6 элементов. В событии click я получаю координаты элемента и использую их для отображения наложения рядом с ним. Проблема в том, что при щелчке элементов слева направо я замечаю, что горизонтальное смещение между элементом и наложением продолжает уменьшаться. То есть, 6-й элемент отображает наложение намного ближе к нему, чем первый элемент. Это происходит как в Chrome, так и в FF, и это проблема, потому что когда-то обложка покрывает сам элемент.

Сначала я использовал свойство JQuery position(), которое не проявляло поведения, описанного выше, но оно возвращало очень разные значения в Chrome и Firefox, плюс официально не поддерживается JQuery на элементах svg. Поэтому я попробовал с DOM standard offsetLeft и offsetTop, а также свойство svg x.animVal.value и различные библиотеки, которые я нашел в Интернете, но все они имеют одинаковую проблему с ошибочным смещением. Я предполагаю, что это происходит потому, что изображение svg масштабируется, поэтому я ищу способ, чтобы просто получить позицию элемента svg относительно фактического html-документа, который содержит его. Есть ли способ сделать это?

Ответ 1

Если вы не сработали с марта (и для тех, у кого есть эта проблема), попробуйте getBoundingClientRect() на вашем SVG node.

Возвращает объект ClientRect, который дает вам верхнюю, нижнюю, левую, правую, ширину и высоту относительно документа. Был в состоянии использовать это, чтобы расположить Twitter-бутстрапы Twitter (divs) рядом с SVG rects.

Ответ 2

jQuery position() не работает для элементов SVG. Для этого есть билет.

Вы можете использовать собственный SVG-метод getBBox(), чтобы получить позицию элемента SVG.

Пример

$('svg circle')[0].getBBox();

Ответ 3

Вы можете получить координату положения относительно страницы любого элемента, также <svg> , с помощью этой небольшой функции:

function getOffset(element)
{
    var bound = element.getBoundingClientRect();
    var html = document.documentElement;

    return {
        top: bound.top + window.pageYOffset - html.clientTop,
        left: bound.left + window.pageXOffset - html.clientLeft
    };
}

var offset = getOffset (svg);
var x = offset.left;
var y = offset.top;

live demo: https://codepen.io/martinwantke/pen/rpNLWr