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

Question

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

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

（SVG 在底轴下方结束）

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

Answer 1

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

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