Ich habe eine Reihe von SVG-Rechtecken (mit D3.js) und ich möchte eine Nachricht beim Mouseover anzeigen. Die Nachricht sollte von einem Kästchen umgeben sein, das als Hintergrund fungiert. Sie sollten beide perfekt zueinander und zum Rechteck (oben und zentriert) ausgerichtet sein. Wie geht das am besten?

Ich habe versucht, einen SVG-Text mit den Attributen "x", "y", "width" und "height" hinzuzufügen, und dann ein SVG-Rect vorangestellt. Das Problem ist, dass der Bezugspunkt für den Text in der Mitte liegt (da ich ihn zentriert ausrichten möchte, habe ich ihn verwendettext-anchor: middle), aber für das Rechteck ist es die obere linke Koordinate, und ich wollte ein wenig Rand um den Text, was es zu einer Art Schmerz macht.

Die andere Option war die Verwendung eines HTML-Divs, was nett wäre, da ich den Text und das Auffüllen direkt hinzufügen kann, aber nicht weiß, wie die absoluten Koordinaten für jedes Rechteck ermittelt werden. Gibt es eine Möglichkeit, dies zu tun?