Tengo una serie de rectángulos svg (usando D3.js) y quiero mostrar un mensaje al pasar el mouse, el mensaje debe estar rodeado por un cuadro que actúa como fondo. Ambos deben estar perfectamente alineados entre sí y con el rectángulo (arriba y centrado). ¿Cuál es la mejor manera de hacer esto?
Intenté agregar un texto svg usando los atributos "x", "y", "ancho" y "alto", y luego anteponiendo un rect svg. El problema es que el punto de referencia para el texto está en el medio (ya que lo quiero alineado centrado lo usé text-anchor: middle
), pero para el rectángulo es la coordenada superior izquierda, además quería un poco de margen alrededor del texto, lo que lo convierte en una especie de un dolor.
La otra opción era usar un div html, lo cual sería bueno, porque puedo agregar el texto y el relleno directamente, pero no sé cómo obtener las coordenadas absolutas para cada rectángulo. ¿Hay alguna forma de hacer esto?