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

Question

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

问题:基于像 this 这样的例子(由 Julian Berger 在 How to get the position of SVG element 中展示)，我制作了工作 SVG。不幸的是，它只有在 SVG 方案未包含在网站中时才有效。 SVG 以外的内容使 evt.clientX 和 Y 坐标系统失败 --> 工具提示开始出现在距光标一定距离处(似乎我拥有的其他 SVG 内容越多，工具提示就越远离光标).显示了简单示例 here ，只需添加几个 <br/>在实际的 SVG 开始之前。

还有我的问题: 您是否有一些想法如何修复工具提示的位置，以便它始终出现在移动的光标旁边？

祝一切顺利， 沃伊泰克

Answer 1

您所要做的就是稍微改变 mousemove 处理程序。它应该将工具提示定位到 SVG 的左上角，而不是页面。你通过减去 SVG 的位置来做到这一点，我们通过用 <div> 围绕 SVG 得到它。元素并访问其 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);
   ...
}

Full demo here