如何在SVG环形图中居中单行文本并差异化设置后缀样式

嘿，我懂你遇到的痛点——原本单个<text>元素能稳稳居中在环形里，结果为了给后缀加不同样式拆分后，对齐就乱套了对吧？别慌，这里有两种实用方案，看你更偏好SVG原生实现还是HTML文本的灵活样式：

方案1：用SVG的<tspan>拆分文本（推荐，和环形图坐标统一） #

既然你已经在用SVG做环形图，直接在SVG内部用<text>包裹两个<tspan>是最省心的，既能保持和环形图的坐标系统一致，又能给不同文本段设置独立样式，还能轻松实现精准居中。

示例代码：

<div class="donut-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut-chart">
    <!-- 环形图基础结构 -->
    <circle class='donut-ring' cx='21' cy='21' r='15.915' fill='transparent' stroke='#eee' stroke-width='4'/>
    <circle class='donut-segment' cx='21' cy='21' r='15.915' fill='transparent' stroke='#f00' stroke-width='4' stroke-dasharray='25 78.54' stroke-dashoffset='0'/>
    
    <!-- 居中的分段文本 -->
    <text 
      x="50%" 
      y="50%" 
      dominant-baseline="middle" 
      text-anchor="middle" 
      font-size="8"
    >
      <tspan font-weight="bold" fill="#333">75</tspan>
      <tspan font-size="6" fill="#666">%</tspan>
    </text>
  </svg>
</div>

关键细节：

• x="50%" y="50%"：把文本块的原点定位在SVG的中心
• dominant-baseline="middle"：确保文本在垂直方向上居中
• text-anchor="middle"：确保文本在水平方向上居中
• 两个<tspan>可以单独设置字体大小、粗细、颜色等样式，而且整体属于同一个<text>元素，不会破坏居中效果

方案2：用HTML的<span>配合绝对定位（适合复杂HTML样式） #

如果你需要用更复杂的HTML样式（比如渐变文字、动画），可以把文本放在独立的<div>里，通过CSS绝对定位来精准居中在环形上方：

首先加CSS样式：

.donut-wrapper {
  max-width: 200px;
  position: relative; /* 作为内部绝对定位元素的参考容器 */
}

.donut-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 用位移实现精准居中，不受文本长度影响 */
  text-align: center;
  font-family: sans-serif;
}

.donut-center-text .main-value {
  font-weight: 700;
  font-size: 24px;
  color: #333;
}

.donut-center-text .suffix {
  font-size: 12px;
  color: #666;
  margin-left: 2px;
}

然后是HTML结构：

<div class="donut-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut-chart">
    <!-- 环形图基础结构 -->
    <circle class='donut-ring' cx='21' cy='21' r='15.915' fill='transparent' stroke='#eee' stroke-width='4'/>
    <circle class='donut-segment' cx='21' cy='21' r='15.915' fill='transparent' stroke='#f00' stroke-width='4' stroke-dasharray='25 78.54' stroke-dashoffset='0'/>
  </svg>
  <!-- 外部文本容器 -->
  <div class="donut-center-text">
    <span class="main-value">75</span>
    <span class="suffix">%</span>
  </div>
</div>

这个方案的好处是你可以完全用CSS控制文本样式，甚至加JavaScript交互，而且transform: translate(-50%, -50%)是目前最可靠的绝对定位居中方法，不管文本内容怎么变，都能牢牢卡在环形中间。

你可以根据自己的需求选其中一种，亲测都能解决你的问题～

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