SVG
포인터 이벤트
수색…
소개
pointer-events
속성을 사용하면 드로잉의 일부가 포인터 이벤트에 반응하도록 제어 할 수 있습니다.
없음
가장 일반적인 유스 케이스는 포인터 이벤트를 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>
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow