Me he topado con este problema mucho con D3. Muchas veces me gusta superponer objetos HTML sobre mi SVG.

Mi estrategia actual es crear un DIV vacío junto al elemento SVG llamado .html-overlay. Lo coloco de acuerdo con el relleno interno que configuré en el SVG para mi gráfico principal (por ejemplo: 20px). Luego uso la siguiente función (con jQuery) para averiguar dónde debe ir el elemento 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
        };
    }

Me pregunto, DEBE haber alguna forma interna (no dependiente de jQuery) para obtener rápidamente la compensación de un elemento. Es muy útil (especialmente después de que un elemento pasa por varias traducciones, rotaciones, escalas, etc.)

También sería bueno tener funciones para determinar el desplazamiento del "centro" de un elemento, el punto superior del elemento, el más bajo, el más a la izquierda, el más a la derecha, etc.

NOTA:

El getBoundingClientRect () no da los números correctos por alguna razón:

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