Tengo un lienzo SVG transparente como superposición a otros elementos. Lo que quiero es permitir que el evento del mouse pase a los elementos a continuación, pero que los eventos en los elementos svg visibles también funcionen. Puedo conseguirlo para que el svg capture eventos, o los permita con css pointer-events (none|auto) en el elemento svg, pero no puedo averiguar cómo capturar eventos solo en los elementos visibles del svg.
Creo los elementos svg dinámicamente, por ejemplo
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) ;Encontrastepointer-events . Creo que es solo cuestión de ajustarlo de la manera correcta. Aquí "desactivo" los eventos de puntero en el <svg> y, al mismo tiempo, especifico que el trazo del <circle> debe tener un evento.
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>