如何在SVG中嵌入SVG？基于jQuery批量向background SVG添加马赛克式空白SVG

嘿，咱们先聊聊你当前的实现和需求之间的偏差，再说说具体的优化方向：

首先得明确：你现在的代码是在创建矩形<rect>元素添加到background SVG里，但这和你需求里的“嵌入空白SVG”不是一回事。不过有一点是做对的：创建SVG元素时用createElementNS指定SVG命名空间（http://www.w3.org/2000/svg），这符合SVG规范，因为SVG元素属于特定的XML命名空间，不能用普通的createElement创建。另外你提到想用jQuery，但当前代码完全是原生DOM操作，没用到jQuery，这也和你的需求不匹配。

我分几个点给你梳理清楚：

1. 先修正核心逻辑：创建空白子SVG而非矩形 #

要实现“嵌入另一个SVG”，你需要创建<svg>子元素，而不是<rect>。原生DOM的正确写法大概是这样：

const SVG_NS = "http://www.w3.org/2000/svg";
// 创建空白子SVG
const childSvg = document.createElementNS(SVG_NS, "svg");
childSvg.setAttributeNS(null, "id", id);
childSvg.setAttributeNS(null, "x", xOff);
childSvg.setAttributeNS(null, "y", yOff);
childSvg.setAttributeNS(null, "width", bD);
childSvg.setAttributeNS(null, "height", bD);
// 给子SVG加背景色（替代你之前的rect填充色）
childSvg.setAttributeNS(null, "style", "background-color: red; stroke: none;");
document.getElementById("background").appendChild(childSvg);

2. 改用jQuery实现（符合你的需求） #

jQuery操作SVG要注意命名空间，默认创建元素时不会自动指定SVG命名空间，所以要手动加上：

const SVG_NS = "http://www.w3.org/2000/svg";
const $childSvg = $('<svg>', {
  xmlns: SVG_NS,
  id: id,
  x: xOff,
  y: yOff,
  width: bD,
  height: bD,
  class: 'mosaic-svg' // 用类来控制样式，比内联更方便维护
});
$('#background').append($childSvg);

然后在CSS里统一定义类样式：

.mosaic-svg {
  background-color: red;
  stroke: none;
}

3. 批量添加的性能优化 #

如果要批量生成很多马赛克子SVG，别循环一次就append一次——频繁操作DOM会触发多次重绘，拖慢页面性能。推荐用文档片段（原生）或者jQuery集合一次性添加：

原生DOM方式 #

const SVG_NS = "http://www.w3.org/2000/svg";
const fragment = document.createDocumentFragment();
// 假设你有批量数据数组
const mosaicData = [
  { id: 'svg-1', xOff: 0, yOff: 0, bD: 50 },
  { id: 'svg-2', xOff: 50, yOff: 0, bD: 50 },
  // ...更多数据
];

mosaicData.forEach(item => {
  const childSvg = document.createElementNS(SVG_NS, "svg");
  childSvg.setAttributeNS(null, "id", item.id);
  childSvg.setAttributeNS(null, "x", item.xOff);
  childSvg.setAttributeNS(null, "y", item.yOff);
  childSvg.setAttributeNS(null, "width", item.bD);
  childSvg.setAttributeNS(null, "height", item.bD);
  childSvg.classList.add('mosaic-svg');
  fragment.appendChild(childSvg);
});
// 一次性插入到background SVG
document.getElementById("background").appendChild(fragment);

jQuery方式 #

const SVG_NS = "http://www.w3.org/2000/svg";
const $mosaicGroup = $();
const mosaicData = [/* 你的批量数据 */];

mosaicData.forEach(item => {
  const $svg = $('<svg>', {
    xmlns: SVG_NS,
    id: item.id,
    x: item.xOff,
    y: item.yOff,
    width: item.bD,
    height: item.bD,
    class: 'mosaic-svg'
  });
  $mosaicGroup = $mosaicGroup.add($svg);
});

$('#background').append($mosaicGroup);

4. 其他细节优化 #

• 去掉不必要的id：如果后续不需要单独操作某个子SVG，就别加id了，减少DOM属性开销。
• 统一命名空间管理：把SVG命名空间定义成常量，避免重复写长字符串，降低出错概率。
• 用CSS类统一样式：别给每个元素写内联样式，维护起来太麻烦，用类控制更灵活。

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