如何獲取正確位置的svg內的html彈出框（使用javascript）

Question

我有一個簡單的svg圖，我正在嘗試爲該圖創建一個簡單的 工具提示彈出窗口，但我無法找出如何正確設置工具提示的位置 。

我有一個的CSS在我的彈出窗口的div是絕對的：

#popup { 
    position: relative 

當創建在SVG節點我鉤狀的監聽器：

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

現在我的問題，在drawPopup callack，我想不出如何 正確設置座標，我試過類似於下面的 在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

看看Raphael。

http://raphaeljs.com/

優良的矢量JavaScript庫。