SVG path mouseover not working with Leaflet-CodePudding

I'm having an issue where a mouseover event is not working with an SVG path element when using a Leaflet overlay pane. I create 3 SVG elements (using D3.js) - a circle, a rect and a path. They all display fine, and the mouseover events work on the circle and rect, but not the path. If I create the same 3 elements without Leaflet, they all work fine.

Here's the javascript code

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")
  })

Here it is as a JSFiddle

And here's the same code without Leaflet which works as I expect

Can anyone explain why the mouseover event is not working with the path element? Thanks!

CodePudding user response：

If you inspect the path in your browser's debugger, you'll see that Leaflet.css contains this...

.leaflet-marker-icon, .leaflet-marker-shadow, .leaflet-image-layer, .leaflet-pane > svg path, .leaflet-tile-container { pointer-events: none; }

So it explicitly turns pointer-events off for all paths that are the direct descendents of SVG tags.

You could override this by adding

.style("pointer-events", "auto")

to the path generation code.