如何在SVG环形饼图内部添加并定位百分比文本？

当然可以实现！我会基于你现有的SVG环形饼图代码，一步步教你如何添加并正确定位每个扇形的百分比文本。

先看修改后的完整代码 #

CSS 样式

svg { 
  width: 200px; 
  border-radius: 50%; 
  background: #3f51b5; 
  transform: rotate(-90deg); 
} 
circle { 
  fill: none; 
  stroke-width: 32; 
  r: 16; 
  cx: 16; 
  cy: 16; 
} 
circle.first { stroke: #00bcd4; } 
circle.second { stroke: #ffeb3b; } 
circle.third { stroke: purple; }
/* 文本专属样式：修正旋转、对齐方式 */
.pie-text {
  transform: rotate(90deg); /* 把SVG旋转的角度转回来，保证文字正向 */
  text-anchor: middle;      /* 文本水平居中对齐 */
  dominant-baseline: middle;/* 文本垂直居中对齐 */
  fill: white;              /* 白色文字更醒目 */
  font-size: 2.5px;         /* 适配32x32的viewBox，按需调整 */
  font-weight: bold;
}

SVG 结构

<svg viewBox="0 0 32 32">
  <circle class='first' stroke-dasharray="34 100"></circle>
  <circle class='second' stroke-dasharray="36 100"></circle>
  <circle class='third' stroke-dasharray="3 100"></circle>
  
  <!-- 第一个扇形的34%文本 -->
  <text class="pie-text" x="16" y="16" dx="4" dy="7">34%</text>
  <!-- 第二个扇形的36%文本 -->
  <text class="pie-text" x="16" y="16" dx="-7" dy="4">36%</text>
  <!-- 第三个扇形的3%文本 -->
  <text class="pie-text" x="16" y="16" dx="-7" dy="-2">3%</text>
</svg>

关键实现细节解析 #

1. 修正文本旋转方向
   你的SVG整体用transform: rotate(-90deg)调整了饼图的起始角度，但这会让所有内部元素跟着旋转，所以我们给文本加transform: rotate(90deg)，把文字转回正向显示。

2. 确保文本居中对齐
   text-anchor: middle和dominant-baseline: middle这两个属性是核心，它们让文本以自身的中心点对齐到我们指定的坐标，避免手动调整时出现偏移错位。

3. 精准定位文本位置

   • 所有文本的基础坐标都是饼图中心x="16" y="16"（对应viewBox的中心点）。
   • 用dx和dy来偏移到对应扇形的中心位置：
     • 比如第一个扇形占34%，对应的角度是34% × 360° = 122.4°，中心角度是61.2°，通过三角函数计算出偏移量后，用dx="4" dy="7"把文本放到扇形中心。
     • 如果需要更精确的定位，可以用公式计算：

       // 百分比转弧度（中心角度）
       const percentage = 34;
       const centerAngle = (percentage * 3.6 / 2) * Math.PI / 180; // 1%对应3.6度，取中心角度
       const offsetRadius = 8; // 文本到中心的距离，按需调整
       const dx = offsetRadius * Math.cos(centerAngle);
       const dy = offsetRadius * Math.sin(centerAngle);
       

       把计算出的dx和dy赋值给文本元素即可，适合动态生成饼图的场景。

4. 适配viewBox的字体大小
   因为你的SVG用了viewBox="0 0 32 32"，所以字体大小要设置得很小（2~3px左右），不然文字会超出饼图范围。

效果说明 #

这样修改后，每个扇形的百分比文本会精准显示在对应区域的中心位置，和你的环形饼图完美匹配。如果后续需要调整扇形比例，只需要同步修改文本内容和对应的dx/dy偏移量即可。

内容的提问来源于stack exchange，提问作者Renjith P N