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

Question

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

这很好，但是问题在于，只要光标离开外部SVG的边界，工具提示就会消失：

（SVG刚好在底轴下方）

是否有办法“扩展”悬停区域以包括任何像这样伸出SVG的元素？

Answer 1

我得到的一个解决方案是为SVG提供100px透明的大border-bottom和background-clip: padding-box（尽管在我的情况下，第二部分甚至不是必需的）。

它不是完美的，因为它依赖于固定的边框宽度，并且如果工具提示比该工具高，则会中断，但是它确实会扩展悬停区域，因此这是一个选择。

Answer 2

这是一个如何将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>