如何在正确位置获取 svg 中的 html 弹出窗口（使用 javascript）答案

【问题标题】：Howto get html popup inside svg at correct position (using javascript)如何在正确位置获取 svg 中的 html 弹出窗口（使用 javascript）
【发布时间】：2011-02-11 16:04:28
【问题描述】：

我有一个 simplr svg-graph，我正在尝试创建一个简单的此图的工具提示弹出窗口，但我无法找出如何设置位置正确的工具提示。

我有一个 .css，其中我的 popup-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，所以我需要以某种方式抵消它？

通常如何处理此类问题？有什么建议吗？

【问题讨论】：

标签： javascript html css svg tooltip

【解决方案1】：

看看拉斐尔。

http://raphaeljs.com/

优秀的矢量 javascript 库。

【讨论】：

您至少可以解释一下他如何与拉斐尔合作，而不仅仅是宣传它。
同意。实际上，我刚刚找到这篇文章是因为我正在寻找一种与 Raphael 一起制作弹出窗口的方法......而且没有简单的方法可以做到！

【解决方案2】：

您可能希望绝对定位工具提示，您的 CSS 规则声明相对，并使用鼠标 x,y 坐标将其放置在图形顶部，因为工具提示是由鼠标指针触发的无论如何。

这个指向quirksmode.org 的链接将包含一些有用的信息，向下滚动页面或搜索鼠标位置，您会发现一些关于准确计算鼠标 x,y 坐标的提示。

【讨论】：