如何实现D3加载含闭合路径外部SVG的鼠标悬停持续绿色填充

我来帮你分析下问题所在，以及对应的解决方案：

问题根源 #

你遇到的情况大概率是因为在mouseout事件中把路径的fill设为none后，如果原SVG里的路径没有设置stroke（或者stroke-width为0），路径会变得完全透明。这时候浏览器无法检测到鼠标在路径上的hover操作，自然后续的mouseover事件就触发不了了。

解决方案 #

这里提供几种可行的解决思路，你可以根据自己的需求选择：

方案1：保存原始填充色，hover后恢复

这种方法会先记录每个路径原本的填充颜色，在鼠标移出时恢复这个颜色，而不是直接设为none，这样路径始终保持可被鼠标检测的状态：

d3.xml("t.svg")
  .mimeType("image/svg+xml")
  .get(function(error, xml) {
    if (error) throw error;
    document.body.appendChild(xml.documentElement);
    d3.selectAll('path.tel')
      // 把每个路径的原始填充色存在元素的data中
      .each(function() {
        const originalFill = d3.select(this).style("fill") || "none";
        d3.select(this).datum({ originalFill });
      })
      .on("mouseover", function(d) {
        d3.select(this).style("fill", "green");
      })
      .on("mouseout", function(d) {
        // 恢复原始填充色
        d3.select(this).style("fill", d.originalFill);
      });
  });

方案2：确保路径始终可触发鼠标事件

如果你就是希望鼠标移出后路径填充为none，可以通过设置透明描边或者调整pointer-events属性，让路径即使透明也能被鼠标检测到：

• 设置透明描边：

d3.xml("t.svg")
  .mimeType("image/svg+xml")
  .get(function(error, xml) {
    if (error) throw error;
    document.body.appendChild(xml.documentElement);
    d3.selectAll('path.tel')
      // 添加透明描边，保证路径有可被检测的区域
      .style("stroke", "transparent")
      .style("stroke-width", "1px")
      .on("mouseover", function(d) {
        d3.select(this).style("fill", "green");
      })
      .on("mouseout", function(d) {
        d3.select(this).style("fill", "none");
      });
  });

• 调整pointer-events属性：

d3.selectAll('path.tel')
  .style("pointer-events", "visible") // 让元素只要可见就触发鼠标事件
  .on("mouseover", function(d) {
    d3.select(this).style("fill", "green");
  })
  .on("mouseout", function(d) {
    d3.select(this).style("fill", "none");
  });

额外提示：适配新版D3

如果你使用的是D3 v4及以上版本，建议改用Promise风格的语法（替代旧版的.get()），这更符合现代JavaScript的写法：

d3.xml("t.svg", { mimeType: "image/svg+xml" })
  .then(function(xml) {
    document.body.appendChild(xml.documentElement);
    // 这里放事件绑定的代码
  })
  .catch(function(error) {
    console.error("加载SVG出错：", error);
  });

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