요소를 제외한 SVG 마우스 이벤트 통과 (SVG Mouse Event Passthrough except for elements)

문제 설명

요소를 제외한 SVG 마우스 이벤트 통과 (SVG Mouse Event Passthrough except for elements)

다른 요소에 대한 오버레이로 투명한 SVG 캔버스가 있습니다. 내가 원하는 것은 마우스 이벤트가 아래 요소로 전달되는 것을 허용하지만 보이는 svg 요소의 이벤트도 작동하도록 하는 것입니다. svg가 이벤트를 캡처하거나 svg 요소의 css 포인터 이벤트(none|auto)를 사용하여 이벤트를 캡처하도록 할 수 있지만 svg의 보이는 요소에서만 이벤트를 캡처하는 방법을 알 수 없습니다.

svg 요소를 동적으로 생성합니다(예:

C=document.createElementNS("http://www.w3.org/2000/svg","circle")
C.setAttributeNS(null,"r",curve_radius)
C.setAttributeNS(null,"cx",x)
C.setAttributeNS(null,"cy",y)
C.setAttributeNS(null,"fill","rgb(0,0,255)")
C.setAttributeNS(null,"stroke","rgb(0,0,255)")     
C.setAttributeNS(null,"stroke‑width","1")

svg.appendChild(C) ;

참조 솔루션

방법 1:

You found pointer‑events. I think it is just a matter of tweaking it in the right way. Here I "disable" pointer‑events on the <svg> and at the same time specifying that the stroke of the <circle> should take event.

document.getElementById('bg').addEventListener('click', e => {
  console.log(e.target.nodeName);
});

#bg {
  background‑color: orange;
  position: relative;
  width: 200px;
  height: 200px;
}

svg {
  pointer‑events: none;
  position: absolute;
}

circle {
  pointer‑events: stroke;
}

p {
  position: absolute;
  top: 100px;
  left: 40px;
}

<div id="bg">
  <p>Text</p>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="200">
    <circle cx="5" cy="5" r="4" stroke="red" fill="none"/>
  </svg>
</div>

(by user18504955、chrwahl)

참조 문서

1. SVG Mouse Event Passthrough except for elements (CC BY‑SA 2.5/3.0/4.0)