SVG
pointeur-événements

Introduction

aucun

Le cas d'utilisation le plus courant consiste à définir des événements de pointeur sur none pour empêcher certaines formes ou l'intégralité de votre dessin de capturer des événements de souris, et à laisser les formes en dessous pour recevoir les événements.

Si vous survolez la zone où le cercle rouge chevauche le cercle bleu, le cercle bleu recevra toujours les événements de la souris, car les événements de pointeur sont définis sur 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> 

remplir

La définition de pointer-events="fill" vous permet de recevoir des événements de souris sur une forme même si son remplissage est défini sur 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>