如何在D3.js的主SVG中添加子SVG标记并调整尺寸？

当然可以把标记SVG添加到你的主SVG里！而且要添加两个并调整尺寸，有几种特别顺手的实现方式，我给你拆解下最优的思路：

如果你的标记SVG代码不长，直接把它的内部元素（去掉外层<svg>标签）嵌入主SVG是最直接的：

• 先提取标记SVG的核心内容：比如你的标记SVG如果是<svg width="40" height="40"><circle cx="20" cy="20" r="15" fill="red"/></svg>，就保留<circle cx="20" cy="20" r="15" fill="red"/>这部分
• 用D3创建<g>容器包裹标记内容，通过transform属性同时控制位置和尺寸：

// 你的原有主SVG创建代码
const svg = d3.select("body").append("svg").attr("width",250).attr("height",250);

// 标记SVG的内部内容（去掉外层<svg>）
const markerContent = `<circle cx="20" cy="20" r="15" fill="red"/>`;

// 添加第一个标记：缩放0.8倍，放在(50,50)位置
svg.append("g")
  .attr("transform", "translate(50, 50) scale(0.8)") // translate控制位置，scale控制尺寸
  .html(markerContent);

// 添加第二个标记：缩放1.2倍，放在(150,150)位置
svg.append("g")
  .attr("transform", "translate(150, 150) scale(1.2)")
  .html(markerContent);

这里的scale是等比例缩放，如果需要单独调整宽高，可以把scale(0.8)改成scale(0.6, 0.9)这种不等比例的参数。

如果你以后可能还要添加更多相同的标记，推荐用<symbol>定义可复用模板，再用<use>引用，这样代码更简洁，维护也方便：

• 先在主SVG里创建<defs>（定义可复用元素的容器），把标记SVG转成<symbol>，记得设置viewBox保证缩放不失真
• 每次引用时直接指定位置和尺寸即可：

// 你的原有主SVG创建代码
const svg = d3.select("body").append("svg").attr("width",250).attr("height",250);

// 创建defs容器，用于存放可复用元素
const defs = svg.append("defs");

// 定义可复用的标记symbol
defs.append("symbol")
  .attr("id", "customMarker")
  .attr("viewBox", "0 0 40 40") // 对应标记SVG的原始宽高，确保缩放时比例正确
  .html(`<circle cx="20" cy="20" r="15" fill="red"/>`); // 标记SVG的内部内容

// 引用第一个标记：尺寸32x32，位置(50,50)
svg.append("use")
  .attr("href", "#customMarker")
  .attr("x", 50)
  .attr("y", 50)
  .attr("width", 32)
  .attr("height", 32);

// 引用第二个标记：尺寸48x48，位置(150,150)
svg.append("use")
  .attr("href", "#customMarker")
  .attr("x", 150)
  .attr("y", 150)
  .attr("width", 48)
  .attr("height", 48);

这种方式下，修改标记样式只需要改一次<symbol>里的内容，所有引用都会同步更新，非常高效。

如果你的标记是单独的.svg文件，可以用D3的d3.xml加载它，再嵌入主SVG：

const svg = d3.select("body").append("svg").attr("width",250).attr("height",250);

// 加载外部标记SVG文件
d3.xml("marker.svg").then(markerDoc => {
  const markerNode = markerDoc.documentElement;
  
  // 添加第一个标记，缩放后放在(50,50)
  svg.append(() => markerNode.cloneNode(true))
    .attr("transform", "translate(50,50) scale(0.8)")
    .attr("width", "auto")
    .attr("height", "auto");
  
  // 添加第二个标记，缩放后放在(150,150)
  svg.append(() => markerNode.cloneNode(true))
    .attr("transform", "translate(150,150) scale(1.2)")
    .attr("width", "auto")
    .attr("height", "auto");
});

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