SVG
eventos punteros

Introducción

ninguna

el caso de uso más común es establecer eventos de puntero en none para evitar que ciertas formas o todo su dibujo capturen eventos del mouse, y permitir que las formas debajo de ellos reciban los eventos.

Si se desplaza sobre el área donde el círculo rojo se superpone al círculo azul, el círculo azul seguirá recibiendo los eventos del mouse, ya que los eventos de puntero se establecen en 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> 

llenar

La configuración de pointer-events="fill" permite recibir eventos del mouse en una forma, incluso si su relleno se establece en 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>