使用Leaflet叠加窗格时SVG path元素mouseover事件不生效问题

问题原因 #

• Leaflet 内置的 CSS 规则对 .leaflet-overlay-pane svg path 元素默认设置了 pointer-events: none，目的是屏蔽非交互矢量元素的鼠标事件，避免干扰地图基础交互。而circle、rect这类 SVG 元素没有被 Leaflet 的默认样式限制，所以事件可以正常触发。
• 你通过 D3 直接插入的自定义 path 没有走 Leaflet 官方的矢量要素创建逻辑，不会被自动添加交互属性，因此继承了上述禁用鼠标事件的样式，导致 mouseover 无法触发。单独运行时没有 Leaflet 的样式干扰，所以事件正常生效。

解决方法 #

在创建 path 元素的代码中，主动为其添加 pointer-events: auto 属性，覆盖 Leaflet 的默认样式限制即可。

修改后的 path 相关代码如下：

svg.append('path')
  .attr('d', 'M 110 110 H 190 V 190 H 110 L 110 110')
  .style("fill", "green")
  .attr("stroke", "black")
  .attr("pointer-events", "auto") // 新增这行即可解决
  .on('mouseover', () => {
      console.log("mouseover path");
      d3.select(event.currentTarget).style("fill", "blue")
  })
  .on('mouseout', () => {
      d3.select(event.currentTarget).style("fill", "green")
  })

内容的提问来源于stack exchange，提问作者Gabbro