如何用D3.js向已有SVG中添加外部分组？

我之前也踩过一模一样的坑——用D3搭好主SVG容器后，想从外部SVG文件里导入特定的<g>分组，结果要么搞出<svg>套<svg>的冗余DOM结构，要么导入的分组元素死活不显示。折腾了好一会儿才摸清楚问题根源，现在把解决方案分享给你：

问题拆解 #

• 直接用d3.xml拉整个外部SVG进来，必然会生成嵌套SVG的结构，完全不符合我们要把分组直接挂在主SVG下的需求
• 后来试着提取外部SVG里的<g>节点直接加到主SVG的<g>里，DOM结构看起来没问题，但元素就是不显示——查了半天才发现，外部SVG里的<defs>（比如渐变、滤镜这类可复用资源）没同步过来，分组里的元素找不到依赖的定义，自然渲染不出来

可行的解决步骤 #

1. 加载外部SVG文件 #

先用d3.xml加载目标SVG文件，拿到它的DOM内容：

d3.xml("test.svg").then(function(xml) {
  // 后续处理逻辑写在这里
});

2. 先同步<defs>（关键步骤！） #

把外部SVG里的<defs>节点提取出来，添加到主SVG中——就算外部SVG没有<defs>也没关系，加个判断就行：

d3.xml("test.svg").then(function(xml) {
  const externalSvg = xml.documentElement;
  // 提取外部SVG的defs节点
  const defsNode = externalSvg.querySelector("defs");
  if (defsNode) {
    // 把defs加到主SVG里（可以直接挂在主SVG根节点，或者你的主g容器下）
    svg.node().appendChild(defsNode);
  }
});

3. 导入目标分组 #

接下来把你需要的<g>节点提取出来，添加到之前创建的主SVG的<g>容器里：

d3.xml("test.svg").then(function(xml) {
  const externalSvg = xml.documentElement;
  // 同步defs
  const defsNode = externalSvg.querySelector("defs");
  if (defsNode) {
    svg.node().appendChild(defsNode);
  }
  // 提取目标分组myGroup
  const targetGroup = externalSvg.querySelector("#myGroup");
  if (targetGroup) {
    // 把分组加到主SVG的g容器中
    svg.node().appendChild(targetGroup);
  }
});

4. 验证效果 #

这样处理之后，你会看到主SVG下直接挂载了<defs>和目标<g>分组，没有讨厌的嵌套SVG，而且分组里的元素因为能找到依赖的定义，终于正常显示了！

补充说明 #

你之前把<defs>包裹在<g>内后解决了问题，其实就是让导入<g>时自动带上了<defs>。但更通用的做法是单独提取<defs>并加到主SVG，这样不管<defs>在外部SVG的哪个位置，所有导入的分组都能复用这些定义，扩展性更好。

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