SVG 除元素外的鼠标事件透传

Question

I have a transparent SVG canvas as an overlay to other elements. What I want is to allow mouse event pass through to the elements below, but events on the visible svg elements to also work. I can get it so the svg captures events, or lets them though with css pointer-events (none|auto) on the svg element, but can't work out how to capture events only on the visible elements of the svg.

I create the svg elements dynamically, eg

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) ;

Answer 1

You foundpointer-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>