本文详解如何利用 SVG 的 text-anchor、dominant-baseline 和 dy 属性，实现文本在圆形中心的像素级精准居中，尤其适用于图标、徽章等设计场景。
本文详解如何利用 svg 的 `text-anchor`、`dominant-baseline` 和 `dy` 属性，实现文本在圆形中心的像素级精准居中，尤其适用于图标、徽章等设计场景。
在 SVG 中将文本（如字母“X”）真正居中于圆形内部，看似只需设置 x="100" y="100" 并搭配 text-anchor="middle" 和 dominant-baseline="middle"，但实际渲染中常因字体度量（ascent/descent）、字形轮廓及浏览器渲染差异导致视觉偏移——文本往往略偏下，无法与红十字中心完全重合。
核心原因在于：dominant-baseline="middle" 是基于字体的数学中线（baseline + 0.5 × 行高）对齐，而非字形视觉中心。对于大字号、粗体或非等宽字体（如 Verdana），字符的实际墨水区域（ink bounds）通常不关于该线对称。
✅ 正确解法是引入 dy 属性进行微调：
- dy 定义文本相对于 y 坐标的垂直偏移量；
- 使用相对单位（如 .10em）可保证缩放一致性；
- 典型调整范围为 -.2em 至 +.2em，具体值需根据字体和字号实测（本例中 .10em 上移即达理想效果）。
以下是修正后的完整代码：
<svg width="200px" height="200px" viewBox="0 0 200 200">
<circle r="50" cx="100" cy="100" fill="#333" />
<text x="100" y="100"
fill="white"
font-size="100"
text-anchor="middle"
dominant-baseline="middle"
font-family="Verdana, sans-serif"
dy=".10em">X</text>
<!-- 辅助定位十字线 -->
<line x1="50" y1="100" x2="150" y2="100" stroke="red" stroke-width="1.5"/>
<line x1="100" y1="50" x2="100" y2="150" stroke="red" stroke-width="1.5"/>
</svg>? 关键注意事项：
- 始终配合 viewBox（推荐使用）替代固定 width/height，确保响应式缩放时居中不失效；
- dy 值非绝对通用，不同字体需单独校准（例如 "Arial" 可能需 .05em，"Georgia" 或需 -.08em）；
- 避免依赖 alignment-baseline（已废弃）或 vertical-align（对 <text> 无效）；
- 如需完全自动化，可通过 JavaScript 测量 getBBox() 获取实际字形边界后动态计算偏移，但多数静态图标场景手动微调 .05em–.15em 即可满足精度要求。
通过 dy 的精细调节，你能在不改动任何布局坐标与字体尺寸的前提下，实现真正意义上的视觉居中——这是 SVG 文本排版中兼顾简洁性与精确性的最佳实践。
