SVG圆形中文本精确居中的实现方法

在 SVG 里将文本精准放置到圆形正中心，看似简单，却常成为前端开发者们容易踩坑的细节。实现方法并不复杂，核心在于三个关键属性：`text-anchor`、`dominant-baseline`，以及用于微调的 `dy`。合理搭配这三个属性，即使不调整坐标和字号，也能让文本在视觉和几何层面均实现完美居中。

直接给出最终结论：通过组合设置 text-anchor（水平锚点）、dominant-baseline（垂直基线），再配合 dy 进行细微偏移，即可在不改动 x/y 坐标与字体大小的前提下，让 SVG 圆形内的文本同时达到几何与视觉上的居中效果。不过实际动手时你会发现，这个方案远没有理论上看起来那么直截了当。

SVG 中文本的对齐行为由多个属性共同决定。text-anchor 控制水平方向的对齐锚点——设为 "middle" 后，x 坐标就变成了文本的水平中心点；dominant-baseline="middle" 则控制垂直基线，使 y 坐标对应文本的中线。听起来很完美？但在实际渲染中，你会发现视觉上仍然存在偏差——因为

字体本身的上下伸展区域（如 ascender 和 descender）会导致明显的视觉偏移。即便数学计算已经严格居中，像字母 "X" 这样的字符，看起来仍会略微下沉。这源于字体度量体系的先天差异：不同字体定义的“中线”并不完全一致。

因此，仅靠 text-anchor 和 dominant-baseline 往往难以做到极致精准。这时就需要 dy 属性来补足。它以当前 font-size 为基准（单位是 em）进行垂直偏移，可确保相对且可伸缩的微调。例如 dy=".10em" 表示向上偏移字体大小的 10%，专门用于补偿字体度量带来的视觉偏差，效果非常稳定。

下面是一个优化后的完整实例，已在主流浏览器中测试通过，实现了像素级的居中效果：

⚠️ 几个关键注意事项：

• dy 的最佳取值会因字体不同而略有差异。例如 "Arial" 通常需要约 .1em，而 "Verdana" 一般适合 .12em。建议在实际项目中根据目标字体实测调整，不要硬记某个固定值；
• 推荐使用 viewBox 替代固定的 width/height，这对响应式缩放更友好；
• 不要用绝对像素值做垂直偏移（如 dy="5"），必须采用相对单位（em 或 %），以保证缩放后的一致性；
• 如果文本包含多个字符（例如 "ABC"），text-anchor="middle" 依然有效，dy 的调整逻辑同样适用，可以放心使用。

总结一下：SVG 中文本居中的核心并非“设置一个属性就万事大吉”，而是“锚点 + 基线 + 微调”三个步骤协同配合才能达到的专业级排版精度。其中 dy 属性所具备的语义化偏移能力，正是实现视觉完美居中的关键所在。