Eu tenho uma série de retângulos svg (usando D3.js) e eu quero exibir uma mensagem no mouseover, a mensagem deve ser cercada por uma caixa que atua como plano de fundo. Ambos devem estar perfeitamente alinhados entre si e com o retângulo (no topo e no centro). Qual é a melhor maneira de fazer isso?

Eu tentei adicionar um texto svg usando os atributos "x", "y", "width" e "height" e, em seguida, prefixando um svg rect. O problema é que o ponto de referência para o texto está no meio (desde que eu quero centralizado alinhado eu useitext-anchor: middle), mas para o retângulo é a coordenada superior esquerda, mais eu queria um pouco de margem em torno do texto, o que torna uma espécie de dor.

A outra opção era usar um html div, o que seria legal, porque eu posso adicionar o texto e preenchimento diretamente, mas não sei como obter as coordenadas absolutas para cada retângulo. Existe uma maneira de fazer isso?