基于30k个SVG路径/形状，如何合并同色图形并生成轮廓？

核心思路 #

先批量合并同色路径，再通过内部描边或反相遮罩实现相邻同色区域的边界区分，避免合并后区域边界消失。

具体实现方案 #

1. 合并同色路径 #

工具批量处理

用Inkscape操作：

• 按Edit > Select Same > Fill Color选中所有同色路径
• 执行Path > Union完成合并，重复该步骤处理所有颜色分组

脚本自动化处理（以SVG.js为例）

适合30k量级的路径，效率更高：

const svg = SVG('#target-svg');
// 按填充色分组路径
const colorGroups = {};
svg.find('path').forEach(path => {
  const fill = path.attr('fill');
  colorGroups[fill] = colorGroups[fill] || [];
  colorGroups[fill].push(path);
});
// 合并每组路径并替换原元素
Object.values(colorGroups).forEach(group => {
  const mergedPath = svg.path().fill(group[0].attr('fill'));
  // 拼接所有路径的d属性实现合并
  mergedPath.plot(group.map(p => p.attr('d')).join(' '));
  // 删除原路径
  group.forEach(p => p.remove());
});

2. 实现相邻同色区域的边界区分 #

方法一：内部描边+背景衬托

给合并后的路径设置描边，通过paint-order让描边在填充下方，配合SVG背景色形成内部边界：

<path d="合并后的路径坐标" 
      fill="#your-color" 
      stroke="#contrast-color" 
      stroke-width="2" 
      paint-order="stroke fill" />

• 描边色选与填充色对比强烈的颜色（比如白色配深色填充）
• stroke-width建议1-3px，避免遮挡区域细节

方法二：反相遮罩实现精准边界

针对每个合并后的路径，创建遮罩仅显示与其他同色区域相邻的边界：

<defs>
  <!-- 遮罩：白色背景 + 所有同色路径的反向区域 -->
  <mask id="mask-path1">
    <rect width="100%" height="100%" fill="white" />
    <path d="所有同色路径的合并d" fill="black" />
    <path d="当前路径d" fill="white" />
  </mask>
</defs>
<!-- 绘制填充路径 -->
<path d="当前路径d" fill="#your-color" />
<!-- 仅在相邻边界显示描边 -->
<path d="当前路径d" fill="none" stroke="#contrast-color" stroke-width="2" mask="url(#mask-path1)" />

注意事项 #

• 处理30k路径时，优先用脚本方案，工具操作易卡顿甚至崩溃
• 合并前确保所有路径为闭合状态，否则Union操作会出错
• 若路径有opacity属性，需统一后再分组合并

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