Расширение зоны наведения подсказки SVG за пределы родительского элемента

Question

У меня есть график SVG, который содержит некоторые элементы, к которым прикреплены всплывающие подсказки.Всплывающие подсказки - это HTML, встроенный с использованием foreignObject, который должен отображаться при наведении на эти элементы.Я дал 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>

Answer 2

Одним из решений, которое мне было дано, было дать SVG большие прозрачные 100px border-bottom и background-clip: padding-box (хотя в моем случае эта вторая часть даже не была необходима).

Он не идеален, поскольку полагается на фиксированную ширину границы и ломается, если всплывающая подсказка выше этой, но расширяет зону наведения, так что это один из вариантов.