我有两个 SVG 元素，每个元素都覆盖整个屏幕。
html,
body {
height: 100%;
}
svg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<rect x=0 y=0 width=50 height=50 fill='#ff0000' onclick="console.log(1)"></rect>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<rect x=40 y=40 width=50 height=50 fill='#00ff00' onclick="console.log(2)"></rect>
</svg>
</body>即使方块不重叠，点击事件也永远不会传递到红色方块，因为带有绿色方块的 SVG 覆盖整个屏幕并捕获任何点击事件。有没有办法在这两个方块上都有点击事件，而它们不在同一个 SVG 中？
像如何通过带有指针事件的 SVG 仅传递点击的解决方案？非常适合将点击事件传递到红色方块，但前提是您可以丢弃绿色方块上的所有事件。