React应用d3-save-svg下载SVG后交互失效问题排查修复

核心问题来自d3-save-svg的实现逻辑和代码写法的共同影响：

• d3-save-svg的save方法默认不会隔离传入的SVG节点，会直接在页面正在使用的原始SVG DOM上做导出预处理：包括补全命名空间、内联计算样式、临时移除子节点转码嵌入资源、处理完成后再重新插入节点。这个过程中被移除再插回的是全新的DOM对象，之前通过d3绑定在旧DOM节点上的点击等交互监听器，全部挂载在已经被删除的旧节点上，新节点没有绑定任何事件，自然无法响应交互。
• 代码中useEffect没有传入第二个依赖参数，组件每次触发重渲染时都会重新执行d3初始化逻辑，重复往容器里插入新的SVG元素，会进一步加剧DOM引用混乱的问题。

只需要做两处改动即可完全解决问题，实现任意次下载后交互都不失效：

1. 导出SVG时永远不直接操作页面上的原始SVG节点，先在内存中深克隆一份完整的SVG节点，把克隆节点传给d3-save-svg做导出处理，所有预处理操作都在内存里的克隆节点上完成，完全不碰页面上正在交互的原始SVG，从根源上避免原始DOM被修改。
2. 给useEffect添加空依赖数组，确保d3初始化SVG、绑定事件的逻辑只在组件首次挂载时执行一次，避免重复渲染导致的DOM重复插入问题。

修复后的完整代码如下：

import { useRef, useEffect } from "react";
import * as d3 from "d3";
import d3_save_svg from "d3-save-svg";

export default function App() {
  const ref = useRef();

  useEffect(() => {
    const svg = d3
      .select(ref.current)
      .append("svg")
      .attr("width", 500)
      .attr("height", 500);

    svg
      .append("circle")
      .attr("cx", 400)
      .attr("cy", 300)
      .attr("r", 100)
      .attr("fill", "blue");

    svg
      .append("text")
      .text("Move")
      .attr("x", 100)
      .attr("y", 100)
      .attr("cursor", "pointer")
      .on("click", function () {
        svg.selectAll("circle").attr("cx", function () {
          return d3.select(this).attr("cx") - 10;
        });
      });

    svg
      .append("path")
      .attr(
        "d",
        "M896 672q119 0 203.5 84.5t84.5 203.5-84.5 203.5-203.5 84.5-203.5-84.5-84.5-203.5 84.5-203.5 203.5-84.5zm704-416q106 0 181 75t75 181v896q0 106-75 181t-181 75h-1408q-106 0-181-75t-75-181v-896q0-106 75-181t181-75h224l51-136q19-49 69.5-84.5t103.5-35.5h512q53 0 103.5 35.5t69.5 84.5l51 136h224zm-704 1152q185 0 316.5-131.5t131.5-316.5-131.5-316.5-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5z"
      )
      .attr("transform", "translate(200 100) scale(0.02)")
      .attr("class", "snap-button")
      .attr("fill", "#1976d2")
      .attr("cursor", "pointer")
      .on("click", function () {
        const config = {
          filename: "customFileName"
        };
        // 深克隆SVG节点，所有导出操作在克隆节点上执行，不改动页面原始节点
        const clonedSvg = svg.node().cloneNode(true);
        d3_save_svg.save(clonedSvg, config);
      });
  // 空依赖确保初始化逻辑仅在组件挂载时执行一次
  }, []);

  return <div ref={ref} />;
}

改完之后导出逻辑完全和页面上的SVG隔离，所有绑定的交互事件会一直保留，导出的文件也始终是用户交互后的最新状态。

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