如何在单个SVG的多个路径上添加独立平直文本？

完全可以实现，核心逻辑是定位到每个省份路径的中心区域，将标签精准放置在该位置，具体操作分两种场景：

场景一：少量省份，手动定位 #

1. 先确定每个省份路径的边界范围：用SVG的getBBox()方法获取路径的最小外接矩形，得到x（左上角x坐标）、y（左上角y坐标）、width（宽度）、height（高度）四个值。
2. 计算路径中心坐标：中心X = x + width/2，中心Y = y + height/2。
3. 添加标签并设置对齐属性，确保文本平直居中：

<!-- 省份路径 -->
<path id="province-paris" d="M... Z" fill="#e0e0e0" />
<!-- 对应编号文本 -->
<text x="185" y="220" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#333">75</text>

• 若路径是不规则形状，边界框中心可能不在省份区域内，手动微调x/y坐标即可。

场景二：大量省份，自动批量处理 #

如果省份数量多，用JS自动计算路径中心并生成文本：

1. 给每个省份路径添加data-id属性存储编号：

<path class="fr-province" data-id="13" d="M... Z" fill="#e0e0e0" />
<path class="fr-province" data-id="69" d="M... Z" fill="#e0e0e0" />

2. 编写JS脚本遍历处理：

// 遍历所有省份路径
document.querySelectorAll('.fr-province').forEach(path => {
  // 获取路径几何中心（取路径半长位置的点，比边界框中心更贴合实际区域）
  const pathHalfLength = path.getTotalLength() / 2;
  const centerPoint = path.getPointAtLength(pathHalfLength);
  
  // 创建text元素
  const textNode = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  // 设置定位和对齐
  textNode.setAttribute('x', centerPoint.x);
  textNode.setAttribute('y', centerPoint.y);
  textNode.setAttribute('text-anchor', 'middle');
  textNode.setAttribute('dominant-baseline', 'middle');
  textNode.setAttribute('font-size', '10');
  textNode.setAttribute('fill', '#222');
  // 设置编号内容
  textNode.textContent = path.getAttribute('data-id');
  
  // 将文本添加到SVG中
  path.parentNode.appendChild(textNode);
});

额外注意事项 #

• 确保标签在SVG的外部，且元素顺序在路径之后（SVG中后添加的元素层级更高，避免被路径遮挡）。
• 若需要不影响路径交互，给添加pointer-events="none"属性。

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