多个<svg>元素居中方法及SVG内堆叠文本截断问题

要让多个SVG元素实现居中对齐，有几种实用的方案，根据你的布局需求选择即可：

• Flexbox布局（推荐）：给SVG的父容器设置Flex属性，轻松实现水平+垂直居中，还能灵活控制SVG之间的间距：

  <div class="svg-wrapper">
    <svg width="120" height="120" style="background: #f0f0f0;">...</svg>
    <svg width="120" height="120" style="background: #e0e0e0;">...</svg>
  </div>
  

  .svg-wrapper {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中（可选） */
    gap: 1.5rem; /* SVG之间的间距，按需调整 */
  }
  

• inline-block + text-align：如果你的布局更适合行内元素的方式，给SVG设置display: inline-block，然后父容器用text-align: center实现水平居中：

  .svg-wrapper {
    text-align: center;
  }
  .svg-wrapper svg {
    display: inline-block;
    vertical-align: middle; /* 让SVG垂直中线对齐，可选 */
  }
  

如果需要让SVG在页面整体居中，只要给顶层容器（比如body）设置上述Flex属性即可。

看你提供的代码，文本被截断主要有两个核心原因：一是SVG的高度不足以容纳80px的大字号文本，二是文本位置的坐标设置导致部分内容超出了SVG的可视区域。这里给你几个针对性的修复方案：

方案1：调整SVG的高度 #

你的SVG高度设置为83px，但实际用了font:bold 80px Arial——80px的字体本身行高（默认会比字号略大）加上文本的位置偏移，很容易超出SVG范围。把SVG高度调大一些，比如改成100px或120px：

<svg width="654" height="100">
  <!-- 文本内容 -->
</svg>

方案2：优化文本位置属性 #

用dominant-baseline属性替代单纯靠y和dy调整位置，能更精准地控制文本对齐，避免内容溢出：

<svg width="654" height="100">
  <text 
    text-anchor="middle" 
    x="50%" 
    y="50%" 
    dominant-baseline="middle" 
    style="font:bold 80px Arial; fill:rgb(0,0,0);"
  >
    <tspan dy="0">Some test text</tspan>
  </text>
</svg>

这里x="50%"+text-anchor="middle"实现水平居中，y="50%"+dominant-baseline="middle"实现垂直居中，文本会正好落在SVG的中心区域，不会被截断。

如果是两段堆叠文本（第一段小字号，第二段大字号），可以调整tspan的dy和x值来避免重叠和截断：

<svg width="654" height="120">
  <text 
    text-anchor="middle" 
    x="50%" 
    y="50%" 
    dominant-baseline="middle" 
    font-size="30px" 
    fill="black"
  >
    <tspan dy="-35">第一段小文本</tspan>
    <tspan x="50%" dy="55" font-size="80px">第二段大文本</tspan>
  </text>
</svg>

额外注意点 #

你的代码里同时设置了font-size="60px"和style里的80px Arial，后者会覆盖前者，实际字号是80px。建议统一在style或属性里设置字体参数，避免样式冲突。

内容的提问来源于stack exchange，提问作者Scott C Wilson