SVG
pointer-events

introduzione

nessuna

il caso d'uso più comune è impostare gli eventi puntatore su none per impedire a determinate forme o a tutto il disegno di catturare gli eventi del mouse e lasciare che le forme sotto di loro ricevano gli eventi.

Se passi con il mouse sopra l'area in cui il cerchio rosso si sovrappone al cerchio blu, il cerchio blu continuerà a ricevere gli eventi del mouse, poiché gli eventi puntatore non sono impostati su 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> 

riempire

Setting pointer-events="fill" ti permette di ricevere eventi del mouse su una forma anche se il suo riempimento è impostato su 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>