У меня есть серия SVG-прямоугольников (с использованием D3.js), и я хочу, чтобы при наведении мыши отображалось сообщение, сообщение должно быть окружено полем, которое выступает в качестве фона. Они оба должны быть идеально выровнены друг с другом и с прямоугольником (сверху и по центру). Каков наилучший способ сделать это?

Я попытался добавить svg-текст, используя «x», «y», «width»; и "высота" атрибуты, а затем добавив svg rect. Проблема в том, что контрольная точка для текста находится в середине (так как я хочу, чтобы он был выровнен по центру, я использовалtext-anchor: middle), но для прямоугольника это верхняя левая координата, плюс я хотел немного отступить вокруг текста, что делает его немного болезненным.

Другой вариант заключался в использовании html div, что было бы неплохо, потому что я могу добавить текст и отступ напрямую, но я не знаю, как получить абсолютные координаты для каждого прямоугольника. Есть ли способ сделать это?