SVG
zdarzenia wskaźnikowe

Wprowadzenie

Żaden

najczęstszym przypadkiem użycia jest ustawienie na none zdarzeń wskaźnika, aby zapobiec określonym kształtom lub całemu rysunkowi, aby uchwycić zdarzenia myszy i pozwolić, aby kształty pod nimi odbierały zdarzenia.

Jeśli najedziesz myszką na obszar, w którym czerwone kółko zachodzi na niebieskie koło, niebieskie kółko nadal będzie otrzymywać zdarzenia myszy, ponieważ zdarzenia wskaźnika są ustawione na 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> 

napełnić

Ustawienie pointer-events="fill" pozwala odbierać zdarzenia myszy na kształcie, nawet jeśli jego wypełnienie jest ustawione na 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>