如何在SVG组件中始终居中文本？解决字体/文本变更偏移问题

解决这个问题的核心是同时搞定水平居中和垂直居中，而且要靠SVG自身的布局属性实现，避免用固定的transform偏移导致内容或字体变化后失效。

直接修改你的<text>元素，加上这几个关键属性：

• x="50%"：把文本的水平起始点设为SVG宽度的50%
• y="50%"：把文本的垂直基线设为SVG高度的50%
• text-anchor="middle"：让文本以x坐标为中心水平对齐
• dominant-baseline="middle"：让文本以y坐标为中心垂直对齐

修改后的完整代码：

<button className='giga-button'>
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 318 112">
    <rect x="1.5" y="1.5" width="315" height="109" fill="none" stroke="aqua" stroke-miterlimit="10" stroke-width="3"/>
    <text fill='white' fontSize="20px" x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">
      a button
    </text>
  </svg>
</button>

方案生效原因 #

• 用百分比设置x和y，不管SVG的viewBox怎么调整，都会自动对应到中心位置
• text-anchor: middle解决水平居中，让文本的中心和x坐标重合
• dominant-baseline: middle解决垂直居中，让文本的中线和y坐标重合

不管你修改font-size、文本内容，甚至调整SVG的尺寸，文本都会始终保持在SVG的中心位置，不需要手动计算偏移量。

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