本文详解如何通过 dy 属性微调 SVG <text> 元素的垂直位置，配合 text-anchor 和 dominant-baseline 实现文字在圆心处的像素级精确居中，无需修改坐标或字体大小。
本文详解如何通过 `dy` 属性微调 svg `
在 SVG 中将文字（如字母“X”）严格居中于一个圆形内部，看似只需设置 x="100" y="100" 并启用 text-anchor="middle" 与 dominant-baseline="middle"，但实际渲染中常因字体度量（ascent/descent、em-box 与基线定义）导致视觉偏移——文字往往略微下沉，无法与红十字标记的几何中心完全重合。
根本原因在于：dominant-baseline="middle" 是基于字体的数学中心（em-box 中点）对齐，而非字形视觉重心；而不同字体（如 Verdana）的字形设计会使 “X” 的实际视觉中心略高于该数学基线。
✅ 正确解法是引入 dy 属性进行精细化垂直补偿：
<svg width="200px" height="200px">
<circle r="50" cx="100" cy="100" fill="none" stroke="#ccc" stroke-width="1"></circle>
<text x="100" y="100"
fill="steelblue"
font-size="100"
text-anchor="middle"
dominant-baseline="middle"
font-family="Verdana"
dy=".10em">X</text>
<!-- 辅助定位十字线 -->
<line x1="50" y1="100" x2="150" y2="100" stroke="red" stroke-width="1.5" stroke-dasharray="4,2"></line>
<line x1="100" y1="50" x2="100" y2="150" stroke="red" stroke-width="1.5" stroke-dasharray="4,2"></line>
</svg>? 关键要点说明：
- dy=".10em" 表示向上偏移当前 font-size 的 10%（正值向上，负值向下），单位 em 相对于当前字体大小，具备响应式缩放能力；
- 调整幅度需根据具体字体和字号实测：.05em～.15em 是常见范围，Verdana 中 “X” 通常需 +.10em；
- 始终保留 text-anchor="middle"（水平居中） + dominant-baseline="middle"（垂直基准居中）作为基础对齐，dy 仅作微调；
- 若更换字体（如 "Arial" 或 "Segoe UI"），应重新校准 dy 值——建议在浏览器开发者工具中实时调整观察效果。
? 进阶提示：对于多字符文本或动态内容，可结合 <tspan> 与 dy 分行控制；若需绝对居中兼容性更强的方案，也可用 <foreignObject> 内嵌 HTML + CSS Flex，但会牺牲纯 SVG 的轻量性与矢量保真度。
综上，dy 是 SVG 文字精确定位不可或缺的“微调杠杆”，掌握它，即可在不改动布局坐标、不牺牲可缩放性的前提下，实现真正意义上的视觉居中。
