html - 将 SVG 工具提示悬停区域扩展到其父元素的边界之外

Question

我有一个 SVG 图表，其中包含一些附有工具提示的元素。工具提示是使用 foreignObject 嵌入的 HTML，应该在将鼠标悬停在这些元素上时显示。我给了 SVG overflow: visible 以确保工具提示可以完全显示。

这工作正常，但问题是一旦光标离开外部 SVG 的边界，工具提示就会消失:

(SVG 在底轴下方结束)

有没有一种方法可以“扩展”悬停区域以包括像这样从 SVG 中伸出的任何元素？

Answer 1

这是一个如何将 SVG 外部元素作为工具提示的示例:

let mouse = {};
let tooltip = document.querySelector("#tooltip");
svg.addEventListener("mousemove", e => {
  tooltip.innerHTML = "";
  if (e.target.tagName == "circle") {
    mouse = oMousePos(svg, e);
   
    tooltip.innerHTML = e.target.id;
    tooltip.style.left = mouse.x + "px";
    tooltip.style.top = mouse.y + "px";
  }
});

function oMousePos(svg, evt) {
  var ClientRect = svg.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}

svg{border:1px solid;}
circle{fill:gold;}
#tooltip{position:absolute;padding:1em; }

<article>
<svg id="svg" viewBox="0 0 100 50">
 <circle id="c1" cx="56" cy="17" r="15" />
 <circle id="c2" cx="23" cy="34" r="7" />
</svg>

<div id="tooltip"></div>
</article>