Mam serię prostokątów svg (używając D3.js) i chcę wyświetlić komunikat po najechaniu myszą, wiadomość powinna być otoczona ramką, która działa jako tło. Powinny być idealnie dopasowane do siebie i do prostokąta (na górze i na środku). Jak najlepiej to zrobić?

Próbowałem dodać tekst svg przy użyciu atrybutów „x”, „y”, „width” i „height”, a następnie poprzedzając svg rect. Problem polega na tym, że punkt odniesienia dla tekstu znajduje się w środku (ponieważ chcę, aby był wyśrodkowany w linii, użyłemtext-anchor: middle), ale dla prostokąta jest to górna lewa współrzędna, a ja chciałem trochę marginesu wokół tekstu, co sprawia, że ​​jest to trochę bolesne.

Inną opcją było użycie html div, co byłoby miłe, ponieważ mogę dodać tekst i dopełnienie bezpośrednio, ale nie wiem, jak uzyskać bezwzględne współrzędne dla każdego prostokąta. Czy istnieje sposób, aby to zrobić?