如何实现SVG中<g>元素内部text文本元素的水平垂直居中

问题原因 #

元素本身没有内置的宽高属性，你给 text 设置的 x="50%" y="50%" 是相对于整个SVG画布的视口尺寸计算的，而非相对于父级 元素，因此无法实现你要的相对父分组居中效果。

解决方案 #

方案1：纯SVG属性实现（无JS，优先推荐）

只需要给所有 text 元素添加两个对齐属性即可，不需要修改原有的坐标值：

• text-anchor="middle"：实现文本水平方向以设置的x坐标为中心对齐
• dominant-baseline="middle"：实现文本垂直方向以设置的y坐标为中心对齐

修改后的代码示例：

<g id="CDT-B6-2">
   <path id="CDT-B6-box"/>
   <text x="1210" y="993" id="CDT-B6-text" text-anchor="middle" dominant-baseline="middle">888</text>
</g>

该方案完全适配动态文本长度，也不需要修改各个g分组原有的坐标设置，每个分组只要保留自己text的原x/y（对应path盒子的中心坐标）即可正常生效。
如果遇到旧版浏览器兼容性问题，可以把 dominant-baseline="middle" 替换为 alignment-baseline="middle"。

方案2：JS批量动态处理（适合盒子坐标动态生成的场景）

如果你不知道每个path盒子的中心坐标，可以用JS批量计算并设置属性，代码示例：

document.querySelectorAll('g[id^="CDT-"]').forEach(g => {
  const box = g.querySelector('path[id$="-box"]');
  const text = g.querySelector('text[id$="-text"]');
  if (!box || !text) return;
  const bbox = box.getBBox();
  // 计算盒子中心坐标
  const centerX = bbox.x + bbox.width / 2;
  const centerY = bbox.y + bbox.height / 2;
  // 给文本设置坐标和对齐属性
  text.setAttribute('x', centerX);
  text.setAttribute('y', centerY);
  text.setAttribute('text-anchor', 'middle');
  text.setAttribute('dominant-baseline', 'middle');
})

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