La propiedad pointer-events
En SVG y CSS la propiedad pointer-events establece como interactúa ( si interactúa ) un cierto elemento con el ratón.
OJO: los espacios vacíos de stroke-dasharray no interactúan con el ratón.
En los siguientes ejemplos en el CSS hay una <ellipse> seguida de un <circle>. Al pasar con el ratón por encima de la <ellipse> si interactúa con el ratón, el circulo tiene que cambiar de color.
Tanto el stroke como el fill de la elipse ( cuando son visibles ) son semitransparentes para poder apreciar la zona de superposición.
visiblePainted (solo SVG)
Si el elemento tiene visibility:visible
el ratón interactúa con el relleno (fill) a menos que fill="none"
el ratón interactúa con el perímetro (stroke) a menos que stroke="none"
visibleFill (solo SVG)
Si el elemento tiene visibility:visible
el ratón interactúa con el relleno (fill) aunque fill="none"
visibleStroke (solo SVG)
Si el elemento tiene visibility:visible
el ratón interactúa con el perímetro (stroke) aunque stroke ="none"
visible (solo SVG)
Si el elemento tiene visibility:visible
el ratón interactúa con el relleno (fill) y el perímetro (stroke) aunque fill="none" y stroke ="none"
OJO: En los siguientes ejemplos, a la izquierda la elipse tiene visibility:hidden y no la podemos ver. Sin embargo está allí e interactua con el ratón según el valor de la propiedad pointer-events
painted (solo SVG)
Independientemente del valor de visibility
el ratón interactúa con el relleno (fill) a menos que fill="none"
el ratón interactúa con el perímetro (stroke) a menos que stroke="none"
fill (solo SVG)
Independientemente del valor de visibility
el ratón interactúa con el relleno (fill) aunque fill="none"
stroke (solo SVG)
independientemente del valor de visibility
el ratón interactúa con el perímetro (stroke) aunque stroke ="none"
all (solo SVG)
independientemente del valor de visibility
el ratón interactúa con el relleno (fill) y el perímetro (stroke) aunque fill="none" y stroke ="none"
none (SVG y CSS)
el elemento NO interactúa con el ratón de ninguna manera.