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

Question

目标：I有一个网站，其中有一些内容和svg方案。当一个指向方案的元素时，工具提示应该出现在鼠标光标旁边。

Problems:基于这这样的例子(由Julian在如何确定SVG元素的位置中展示)，我做了SVG工作。不幸的是，只有当SVG计划不包括在网站中时，它才能发挥作用。内容，然后SVG使evt.clientX和Y坐标系统失败->工具提示开始出现在离游标一定距离的地方(似乎我拥有的SVG内容越多，工具提示就越远离游标)。简单的示例显示了这里，只需在实际的<br/>开始之前添加几个<br/>即可。

和我的问题：，您有一些想法如何修复工具提示的位置，以便它总是出现在移动的光标旁边吗？

万事如意，沃伊特克

Answer 1

你所要做的就是稍微改变一下摩丝表情处理程序。它应该将工具提示相对于SVG的左上角定位，而不是页面。您可以通过减去SVG的位置来做到这一点，我们可以在SVG周围设置一个<div>元素，并访问它的offsetLeft和offsetTop属性。

<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);
   ...
}

全演示在这里