J'ai une série de rectangles svg (utilisant D3.js) et je veux afficher un message au survol de la souris, le message doit être entouré d'une boîte qui agit comme arrière-plan. Le message doit être entouré d'une boîte qui sert de fond. Les deux doivent être parfaitement alignés l'un sur l'autre et sur le rectangle (en haut et centré). Quelle est la meilleure façon de procéder ?
J'ai essayé d'ajouter un texte svg en utilisant les attributs "x", "y", "width" et "height", puis d'ajouter un rect svg. Le problème est que le point de référence du texte est au milieu (comme je veux qu'il soit centré, j'ai utilisé l'attribut text-anchor: middle
), mais pour le rectangle, c'est la coordonnée supérieure gauche, et je voulais une marge autour du texte, ce qui est un peu pénible.
L'autre option était d'utiliser une div html, ce qui serait bien, parce que je peux ajouter le texte et le padding directement, mais je ne sais pas comment obtenir les coordonnées absolues pour chaque rectangle. Est-ce qu'il y a un moyen de faire cela ?