如何在被透明矩形遮挡的SVG绿色矩形区域显示tooltip？

问题出在上方的透明矩形默认会拦截鼠标事件——哪怕它的fill是transparent，SVG元素依然会捕获鼠标交互，导致下方的绿色矩形接收不到hover事件，自然无法触发<title>定义的tooltip。

有两种简单的解决办法：

方法1：让透明矩形完全忽略鼠标事件 #

给上方的透明矩形添加pointer-events="none"属性，这样它就不会拦截任何鼠标操作，事件会直接穿透到下方的绿色矩形上：

<svg width="300" height="300">
    <rect x="100" y="100" width="100" height="100" stroke="black" fill="green">
        <title>I'm a tooltip</title>
    </rect>
    <rect x="150" y="150" width="150" height="150" stroke="red" stroke-width="3" fill="transparent" pointer-events="none"></rect>
</svg>

方法2：保留透明矩形的边框交互，仅让填充区域穿透 #

如果需要保留透明矩形的红色边框的鼠标交互（比如hover边框时有效果），可以把pointer-events设为stroke，这样只有元素的stroke部分会响应鼠标事件，透明的fill区域会允许事件穿透：

<svg width="300" height="300">
    <rect x="100" y="100" width="100" height="100" stroke="black" fill="green">
        <title>I'm a tooltip</title>
    </rect>
    <rect x="150" y="150" width="150" height="150" stroke="red" stroke-width="3" fill="transparent" pointer-events="stroke"></rect>
</svg>

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