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, e.g.
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) ;
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>