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

Question

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

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

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

一切顺利， 沃伊泰克

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