Мы много сталкивались с этой проблемой с 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) способ быстро получить элемент 'смещение. Это's очень полезно (особенно после того, как элементы проходят многократные переводы, вращения, масштабирование и т. д.)

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

НОТА:

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