SVG元素与被部分遮挡DOM元素的鼠标事件检测与处理

核心思路是用CSS的pointer-events属性实现事件穿透：让SVG层的空白区域允许指针事件透传到下方DOM层，同时只让SVG内的可见元素（比如示例里的rect）捕获指针事件。

具体实现 #

1. 给#svg-layer设置pointer-events: none，让整个SVG层默认不拦截指针事件，事件会直接穿过它作用于下方的DOM元素。
2. 给SVG内需要响应事件的元素（比如示例中的rect）设置pointer-events: auto，让这些元素正常捕获指针事件。

修改后的完整代码：

<html>
<head>
    <style>
        #dom-layer{
            position: relative;
        }
        #svg-layer{
            position: absolute;
            top: 0;
            pointer-events: none; /* SVG层默认不拦截事件，允许穿透 */
        }
        #svg-layer rect {
            pointer-events: auto; /* 单独让rect元素恢复事件响应能力 */
        }
    </style>
</head>
<body>
    <div>
        <div id="dom-layer">
            <div>
                <button onclick="alert('clicked button')">Button</button>
            </div>
        </div>
        <svg id="svg-layer" width="100%" height="100%">
            <rect x="30" y="0" width="50" height="50" style="fill:rgb(0,0,255)" onclick="alert('clicked rect')" />
        </svg>
    </div>
</body>
</html>

原理说明 #

• pointer-events: none会让元素完全忽略所有指针事件，事件会直接穿过该元素触发下方元素的对应事件。
• 给SVG内的具体元素重置pointer-events: auto，就能让这些元素重新获得捕获指针事件的能力，不会影响SVG空白区域的事件穿透逻辑。

这种方案完全依赖浏览器原生事件机制，不需要手动派发事件，不管#dom-layer结构多复杂，都能保持原生的事件捕获和冒泡逻辑，就像SVG层不存在一样。

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