如何为SVG中每个路径/图形自动居中文本（无需手动计算）

嘿，我完全懂你的困扰——手动给每个SVG里的图形计算文本居中位置简直是重复劳动！你之前遇到的文本重叠问题，确实是因为x="50%" y="50%"是相对于整个SVG的 viewBox来定位的，所有文本自然都挤在SVG的中心了。

下面给你两个实用的解决方案，帮你自动实现每个图形/分组的文本居中：

方案1：用JavaScript自动计算并定位（最省心） #

这个方法会自动获取每个房间分组的边界框，然后把文本精准放在中心，完全不用手动算坐标。

首先，先调整你的SVG结构，把每个房间的路径和对应文本放在同一个<g>分组里，给分组加个统一的类（比如room-group）：

<svg viewBox="0 0 91.742 214.2" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#000" stroke-width="1">
  <!-- 第一个房间 -->
  <g class="room-group">
    <path class="room-path" d="M15,20 L45,20 L45,60 L15,60 Z" /> <!-- 替换成你的实际路径 -->
    <text class="room-text">145</text>
  </g>
  <!-- 第二个房间 -->
  <g class="room-group">
    <path class="room-path" d="M60,20 L90,20 L90,60 L60,60 Z" /> <!-- 替换成你的实际路径 -->
    <text class="room-text">146</text>
  </g>
</svg>

然后添加这段JavaScript代码（放在HTML的<script>标签里，或者外部JS文件中）：

// 等DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有房间分组
  const roomGroups = document.querySelectorAll('.room-group');
  
  roomGroups.forEach(group => {
    // 获取当前分组的边界框（包含路径的实际范围）
    const bbox = group.getBBox();
    // 计算分组的中心坐标
    const centerX = bbox.x + bbox.width / 2;
    const centerY = bbox.y + bbox.height / 2;
    
    // 找到分组里的文本元素
    const textElement = group.querySelector('.room-text');
    if (textElement) {
      // 设置文本的中心位置
      textElement.setAttribute('x', centerX);
      textElement.setAttribute('y', centerY);
      // 让文本水平+垂直居中
      textElement.setAttribute('text-anchor', 'middle');
      textElement.setAttribute('dominant-baseline', 'middle');
    }
  });
});

为什么这个方法有效？

• getBBox()会精准获取每个<g>分组的实际包围盒（不管路径形状多复杂）
• text-anchor="middle"让文本水平居中于x坐标，dominant-baseline="middle"让文本垂直居中于y坐标，两者配合就实现了完美的居中效果

方案2：纯SVG属性实现（适合静态场景） #

如果你的SVG是静态的，不想用JS，也可以给每个<text>设置transform属性，结合text-anchor和dominant-baseline：

<g>
  <path d="M15,20 L45,20 L45,60 L15,60 Z" />
  <text text-anchor="middle" dominant-baseline="middle" transform="translate(30, 40)">145</text>
</g>

这里translate(30,40)里的数值是路径的中心坐标（(15+45)/2=30，(20+60)/2=40）。不过这个方法还是需要手动算每个路径的中心，适合少量图形的场景。

小提示 #

• 确保你的SVG是内联在HTML中的，或者JS能访问到SVG元素（如果是外部SVG文件，需要用AJAX加载后再执行代码）
• 如果路径有stroke-width，getBBox()会包含描边的宽度，如果你不想让描边影响居中，可以给路径加vector-effect="non-scaling-stroke"或者手动调整计算逻辑

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