Tengo un problema en el que un evento de mouseover no funciona con un elemento de path SVG cuando uso un panel de superposición de folleto. Creo 3 elementos SVG (usando D3.js): un circle , un rect y una path . Todos se muestran bien, y los eventos de mouseover funcionan en el circle y el rect , pero no en la path . Si creo los mismos 3 elementos sin Leaflet, todos funcionan bien.

Aquí está el código javascript

 var mymap = L.map('mapid').setView([51.505, -0.09], 13); L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(mymap); //initialize svg to add to map L.svg({clickable:true}).addTo(mymap)// we have to make the svg layer clickable const overlay = d3.select(mymap.getPanes().overlayPane) const svg = overlay.select('svg').attr("pointer-events", "auto") svg.append('path') .attr('d', 'M 110 110 H 190 V 190 H 110 L 110 110') .style("fill", "green") .attr("stroke", "black") .on('mouseover', () => { console.log("mouseover path"); d3.select(event.currentTarget).style("fill", "blue") }) .on('mouseout', () => { d3.select(event.currentTarget).style("fill", "green") }) svg.append('circle') .attr("cx", 300) .attr("cy", 200) .attr("r", 75) .style("fill", "yellow") .attr("stroke", "black") .on('mouseover', () => { console.log("mouseover circle"); d3.select(event.currentTarget).style("fill", "blue") }) .on('mouseout', () => { d3.select(event.currentTarget).style("fill", "yellow") }) svg.append('rect') .attr("x", 500) .attr("y", 200) .attr("width", 75) .attr("height", 75) .style("fill", "red") .attr("stroke", "black") .on('mouseover', () => { console.log("mouseover rect"); d3.select(event.currentTarget).style("fill", "blue") }) .on('mouseout', () => { d3.select(event.currentTarget).style("fill", "red") })

Aquí está como un JSFiddle

Y aquí está el mismo código sin Leaflet que funciona como espero

¿Alguien puede explicar por qué el evento mouseover no funciona con el elemento de path ? ¡Gracias!