SVG
포인터 이벤트

소개

없음

가장 일반적인 유스 케이스는 포인터 이벤트를 none 으로 설정하여 드로잉의 특정 모양 또는 모든이 마우스 이벤트를 캡처하지 못하게하고 그 아래의 셰이프가 이벤트를 받도록하는 것입니다.

빨간색 원이 파란색 원과 겹치는 영역 위로 마우스를 가져 가면 포인터 이벤트가 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> 

가득 따르다

pointer-events="fill" 으로 설정하면 채우기가 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>