SVG
ポインタイベント

前書き

無し

最も一般的な使用例は、ポインタイベントをnoneに設定して、特定の図形またはすべての図形がマウスイベントをキャプチャし、その下の図形がイベントを受け取らないようにすることです。

赤い円が青い円と重なっている領域にカーソルを合わせると、青い円はマウスイベントを受け取ります。ポインタイベントはnone設定されてnone

<svg viewBox="0 0 150 100">
    <style>
        .target:hover{fill:green}
    </style>
    <circle class="target" cx="50" cy="50" r="50" fill="blue"/>
    <circle cx="100" cy="50" r="50" fill="red" pointer-events="none"/>
</svg> 

埋める

pointer-events="fill"と設定すると、塗りつぶしがnone設定されてnoneてもシェイプ上でマウスイベントを受け取ることができます

<svg viewBox="0 0 100 100">
    <style>
        circle:hover{fill:green}
    </style>
    <circle class="target" cx="50" cy="50" r="50" fill="none"/>
</svg>