Z-indexing SVG 元素

Question

嗨，我在设置 SVG 元素相对于 HTML 元素的 Z-index 时遇到问题

我的 HTML 元素（弹出窗口）的 z-index 为 4 我的 SVG 元素（行）的 z-index 为 3

但我的 SVG 元素仍然与 html 弹出窗口重叠。如果我进一步减少 svg 上的 z-index，它会像下面的截图一样消失

SVG z-index @ 3

SVG Z 索引 @ 2

无论如何我可以设置 z-index 以便在弹出窗口后面绘制线条？

谢谢你

编辑：

这是我迄今为止所尝试的

弹出框由 4 个 div 组成

.markerBubble {
  position: absolute;
  background: white;
  border: 2px solid white;
  padding: 10px;
  border-radius : 4px;
  box-shadow:4px 6px #888888;
  max-width: 250px;
  max-height:150px;
  overflow-y:auto;
  z-index: 4;
}

.markerBubbleouter{
  display: flex;
  
}
 .markerBubble1{
  width:60%;
  padding-right:10px;
  text-align:right;
 }
 .markerBubble2{
  width:30%;
  text-align:left;
 }

markerBubble 包含 3 个 div 的其余部分，外层，1 和 2，所以我将 z-index 放在了 markerBubble 上。

对于 SVG Line 我已经放置了以下 CSS

.leader-line{
  position: relative;
z-index: 3;
}