Я столкнулся с этой проблемой много с D3. Большую часть времени мне нравится накладывать HTML-объекты на SVG.

Моя текущая стратегия заключается в создании пустого DIV рядом с элементом SVG с именем .html-overlay. Я позиционирую его в соответствии с внутренним заполнением, которое я установил в SVG для моей основной графики (например, 20 пикселей). Затем я использую следующую функцию (с jQuery), чтобы выяснить, куда должен идти элемент HTML:

//element is the object returned by D3 .append()
var getOffset: function(element) {
        var $element = $(element[0][0]);
        return {
            left: $element.offset().left - $('.html-overlay').offset().left,
            top: $element.offset().top - $('.html-overlay').offset().top
        };
    }

Интересно, должен быть какой-то внутренний (не зависящий от jQuery) способ, чтобы быстро получить смещение элемента. Это очень полезно (особенно после того, как элементы проходят многократные переводы, вращения, масштабирование и т. Д.)

Также было бы здорово иметь функции для определения смещения «центра» элемента, самой верхней точки элемента, самой нижней, самой левой, крайней правой и т. Д.

НОТА:

GetBoundingClientRect () не дает правильные числа по некоторым причинам:

var $element = $(element[0][0]);

            console.log($element.offset(), element[0][0].getBoundingClientRect())
Object
left: 328
top: 248.8333282470703
__proto__: Object

ClientRect
bottom: 376.83331298828125
height: 139.99998474121094
left: 328
right: 478
top: 236.8333282470703
width: 150