如何在HTML元素上层绘制连线且不遮挡下层元素的点击功能

核心问题原因 #

绝对定位的SVG元素默认会捕获所有鼠标交互事件，即使是透明无内容的区域也会遮挡下层元素，导致按钮等交互组件无法触发点击。

可行实现方案 #

方案1：添加pointer-events属性（最符合需求，可保留SVG最高z-index） #

给SVG元素添加pointer-events: none样式，即可让整个SVG元素不响应任何鼠标事件，点击事件会直接穿透到下层元素，完全不影响下层交互，同时可以保留SVG的z-index为最大值，连线正常显示在上层。
修改后的SVG代码如下：

<svg height="210" width="500" style="position: absolute;pointer-events: none;">
  <line x1="50" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

如果后续需要让连线本身也支持点击、hover等交互，可以单独给line标签设置pointer-events: stroke，这样只有连线区域会响应事件，SVG的其他透明区域仍然不会遮挡下层元素：

<svg height="210" width="500" style="position: absolute;pointer-events: none;">
  <line x1="50" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2;pointer-events: stroke;" />
</svg>

方案2：调整元素层级（备用方案） #

如果不需要连线覆盖在所有元素最上层，可以给下层可交互的div设置position: relative; z-index: 1，让交互元素层级高于SVG，也可以解决点击问题，该方案不符合z-index最大的需求，仅作为备选。

内容的提问来源于stack exchange，提问作者Huy2122k