怎样在 SVG 圆形中精确居中文本

通过合理设置 text-anchor、dominant-baseline 及微调 dy 属性，可在不修改 x/y 坐标和字体大小的前提下，实现文本在 SVG 圆形内的视觉与几何双重居中。

通过合理设置 `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%，能有效补偿字体度量带来的视觉偏差。

以下是优化后的完整示例（已验证在主流浏览器中实现像素级居中）：

<svg width="200px" height="200px" viewBox="0 0 200 200">  <circle r="50" cx="100" cy="100" fill="none" stroke="#ccc" stroke-width="1"/>  <text x="100" y="100"         fill="black"         font-size="100"         text-anchor="middle"         dominant-baseline="middle"         font-family="Verdana, sans-serif"        dy=".12em">X</text>  <!-- 辅助十字线（验证中心） -->  <line x1="50" y1="100" x2="150" y2="100" stroke="red" stroke-width="1.5" stroke-dasharray="2,2"/>  <line x1="100" y1="50" x2="100" y2="150" stroke="red" stroke-width="1.5" stroke-dasharray="2,2"/></svg>

⚠️ 注意事项：

• dy 的最佳值因字体而异（如 "Arial" 可能需 .1em，"Verdana" 常用 .12em），建议在目标字体下实测调整；
• 使用 viewBox 替代固定 width/height 更利于响应式缩放；
• 避免依赖绝对像素偏移（如 dy="5"），应始终使用相对单位（em 或 %）保证缩放一致性；
• 若需多字符居中（如 "ABC"），确保 text-anchor="middle" 仍生效，且 dy 调整逻辑不变。

总结：SVG 文本居中不是“设置即完成”，而是“锚点 + 基线 + 微调”的三步实践。掌握 dy 的语义化偏移能力，是实现专业级排版精度的关键。