本文详解通过 dominant-baseline、text-anchor 与 dy 属性协同作用，实现 SVG 圆形内文本（如字母“X”）的视觉与几何中心对齐，无需调整坐标或字体大小。
本文详解通过 `dominant-baseline`、`text-anchor` 与 `dy` 属性协同作用，实现 svg 圆形内文本（如字母“x”）的视觉与几何中心对齐，无需调整坐标或字体大小。
在 SVG 中将文本精确居中于圆形内部，看似只需设置 x="100"、y="100" 并启用 text-anchor="middle" 和 dominant-baseline="middle"，但实际渲染中常因字体度量（font metrics）导致字符基线偏移——尤其当 font-size 较大时，“X”等大写字母的视觉重心仍会略低于圆心（表现为轻微下沉）。这是因为 dominant-baseline="middle" 是基于字体的数学中线（em-box 中线），而非字符本身的视觉中心。
✅ 正确解法是引入 dy 属性进行微调：
- dy=".10em" 表示沿 y 轴向上偏移当前字体尺寸的 10%（正值向上，负值向下）；
- 该偏移量需根据具体字体和字号实验确定，.10em 对 Verdana 字体 + font-size="100" 效果良好；
- dy 是相对偏移，单位推荐使用 em（相对于当前 font-size），确保响应式缩放一致性。
以下是可直接运行的完整示例：
<svg width="200px" height="200px" viewbox="0 0 200 200"><circle r="50" cx="100" cy="100" fill="none" stroke="#333" stroke-width="1.5"></circle><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.2" stroke-dasharray="2,2"></line><line x1="100" y1="50" x2="100" y2="150" stroke="red" stroke-width="1.2" stroke-dasharray="2,2"></line></svg>
? 注意事项：
- 始终配合使用 text-anchor="middle"（水平居中）与 dominant-baseline="middle"（垂直基准线居中）作为基础；
- dy 值非通用常量：不同字体（如 Arial、Georgia）、不同字号甚至浏览器渲染引擎可能需要微调（常见范围：.05em–.15em）；
- 推荐在
中显式声明 font-family，避免系统默认字体差异影响居中精度； - 若需绝对精确控制，可结合 getBBox() 动态计算文本边界并修正位置，但 dy 微调已满足绝大多数设计需求。
综上，dy 是解决 SVG 文本“看似居中实则偏移”问题的关键补正手段——它不破坏语义结构，不依赖坐标硬编码，是轻量、可维护且符合 Web 标准的实践方案。
