Как получить всплывающее окно HTML внутри SVG в правильном положении (с помощью JavaScript)

Question

У меня есть более простой SVG-граф, и я пытаюсь создать простой всплывающая подсказка для этого графика, но я не могу узнать, как установить позицию всплывающей подсказки.

У меня есть .css, где мой popup-div является абсолютным:

#popup {
    position: relative

При создании узлов в svg я подключаю слушателя как:

    p.setAttributeNS(null,"onmousemove","parent.drawPopup(evt)");

Теперь к моей проблеме, в каллере drawPopup, я не могу понять, как чтобы правильно установить координаты, я пробовал что-то вроде следующего в функции drawPopu:

pop = document.getElementById("popup"); 
pop.innerHTML = popupText;
pop.style.visibility='visible';
pop.style.left=evt.pageX + 'px';

но pageX, по-видимому, относительно svg.graph, поэтому мне нужно как-то сместить его?

Как обычно поступают с такими проблемами? Есть предложения?

Answer 1

Возможно, вы захотите расположить подсказку абсолютно, ваше CSS-правило гласит: относительно , и использовать координаты мыши x, y, чтобы поместить ее поверх графика, так как подсказка в любом случае вызывается указателем мыши. .

Эта ссылка на quirksmode.org будет содержать полезную информацию, прокрутить страницу вниз или выполнить поиск положение мыши , и вы найдете несколько советов по точному вычислению мыши x, y. координаты.

Answer 2

Посмотрите на Рафаэля.

http://raphaeljs.com/

Отличная библиотека векторного JavaScript.