将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>