Javascript 尽管网站上有非SVG元素，但如何在SVG上的鼠标光标旁边显示工具提示？

目标： 我有一个网站，有一些内容和SVG计划的中间。当指向方案的元素时，工具提示应显示在鼠标光标旁边

问题：基于以下示例（由Julian Berger在中展示），我制作了SVG。不幸的是，只有当SVG方案未包含在网站中时，它才起作用。SVG以外的内容使evt.clientX和Y坐标系失败-->工具提示开始出现在距离光标一定距离的地方（似乎我拥有的SVG以外的内容越多，工具提示越远离光标）。下面给出了一个简单的示例，只需在实际SVG开始之前添加两个

还有我的问题： 您是否知道如何固定工具提示的位置，使其始终显示在移动光标旁边

祝你一切顺利，

---

Wojtek

您所要做的就是稍微修改一下mousemove处理程序。它应该相对于SVG的左上角而不是页面来定位工具提示。您可以通过减去SVG的位置来实现这一点，我们通过使用

元素包围SVG并访问其offsetLeft和offsetTop属性来获得SVG

<div id="mysvg">
  <svg>...</svg>
</div>

function ShowTooltip(evt, mouseovertext) {
   svg = document.getElementById("mysvg");
   tooltip.setAttributeNS(null,"x",evt.clientX+11 - svg.offsetLeft);
   tooltip.setAttributeNS(null,"y",evt.clientY+27 - svg.offsetTop);
   ...
}

...
功能显示工具提示（evt、mouseovertext）{
svg=document.getElementById（“mysvg”）；
setAttributeNS（null，“x”，evt.clientX+11-svg.offsetLeft）；
setAttributeNS（null，“y”，evt.clientY+27-svg.offsetTop）；
...
}

---

这个问题的答案是否有帮助：保罗，谢谢你的快速回答！但是，此解决方案不适用于我的firefox（适用于Mac OS X的verion 34.0.5，适用于windows的版本31.0），其中工具提示窗口冻结在SVG图像的左上角。另一方面，它在我的Chrome 39.0.2171.95、Opera 26.0.1656.32和Safari 7.1上运行得非常好，但我目前还不知道如何在firefox上修复它。对不起。FF中的SVG似乎没有offsetLeft和offsetTop属性。我已经调整了答案。现在它应该在任何地方都能用。