垂直居中文本
" /> 元素中精确垂直居中文本
" />
svg 中文本的 `getbbox().height` 仅返回字形包围盒高度，但不反映其内部基线（baseline）位置；默认 `alignment-baseline="baseline"` 导致文本底部对齐而非几何中心对齐，因此直接用 `rectheight - textheight` 计算 y 坐标会偏移。
在 SVG 中实现文本在
❗ 根本问题：getBBox() 返回的是“视觉包围盒”，不是“逻辑锚点参考框”
当你调用 text.getBBox() 时，它返回一个矩形区域，该区域紧密包裹所有可见字形（包括升部 ascender、降部 descender），但这个矩形的 (x, y) 坐标并非文本的“中心点”或“顶部左角”，而是基于当前 alignment-baseline 和 dominant-baseline 计算出的包围盒左上角。更重要的是：
- textBBox.height 是包围盒总高度（含上下留白），但它不等于从 y 属性到文本底部/顶部的固定距离；
- 默认 alignment-baseline="baseline" 意味着：
中的 Y 值对齐的是文本基线（即字母如 "x" 的底部线），而非包围盒顶部或中心； - 因此，即使你用 (rectHeight - textBBox.height) / 2 算出“垂直留白”，再套用 rectY + rectHeight - padding，实际效果仍是将基线置于目标位置，而文本整体（含降部）会向下溢出——造成视觉上偏下。
如下代码直观揭示差异：
<svg viewBox="0 0 200 100" height="150"> <!-- 可视化基线参考线 --> <line x1="0" y1="40" x2="200" y2="40" stroke="#999" stroke-dasharray="2,2"/> <text x="10" y="40" font-size="24" fill="blue">gypq</text> <!-- 注意：'g','y','p','q' 的降部（descender）明显低于 y=40 的线 --> </svg>
你会看到字母 g 和 y 的尾巴延伸到了参考线下方——这正是 getBBox().height 包含的部分，但 y="40" 并未指向包围盒中心。
✅ 正确解法：放弃手动计算 y，改用语义化对齐属性
要绕过基线陷阱，应让 SVG 渲染引擎自动处理对齐逻辑，而非依赖 getBBox() 手动推算：
| 属性 | 作用 | 推荐值 |
|---|---|---|
| text-anchor | 控制水平锚点 | "middle"（使 x 对齐文本水平中心） |
| alignment-baseline | 控制垂直锚点（相对于父容器） | "central"（对齐到父元素的中心线，最符合“几何居中”直觉） |
| dominant-baseline | 更底层的基线控制（可选） | "central" 或 "middle"（与 alignment-baseline 协同） |
配合结构优化，推荐采用
<svg viewBox="0 0 100 100">
<!-- 将 rect 和 text 封装进 group，以 group 原点为参考 -->
<g transform="translate(30, 30)"> <!-- 整体平移到 (30,30) -->
<rect width="40" height="40" fill="#eee" stroke="#666"/>
<!-- 文本坐标相对于 group 原点：x=20, y=20 即 rect 中心 -->
<text
x="20"
y="20"
text-anchor="middle"
alignment-baseline="central"
font-size="16"
dominant-baseline="central"
>
Hello
</text>
</g>
</svg>✅ 此方案优势：
- 不依赖 getBBox()，彻底规避字体度量误差；
- 不受外部 CSS font-size 影响（只要 font-size 显式设在
上）； - x="20" + text-anchor="middle" → 水平精准居中；
- y="20" + alignment-baseline="central" → 垂直方向以文本内容的视觉中心对齐到 y=20，而非基线。
⚠️ 注意事项（避坑指南）
-
CSS 干预风险：若通过 CSS 设置 text { font-size: 18px }，而
未显式声明 font-size 属性，则 getBBox() 可能返回错误尺寸（因其不读取 CSS 计算值）。务必在 元素上内联设置 font-size。 - alignment-baseline 兼容性：现代浏览器支持良好，但旧版 Safari 可能需搭配 dominant-baseline 使用；如需极致兼容，可用 dy 微调（不推荐，违背本教程“理解原理”初衷）。
- 不要混用 y + baseline 手动计算：这是问题根源。一旦启用 alignment-baseline="central"，y 即代表文本视觉中心纵坐标，无需额外加减 textBBox.height。
总结
你遇到的“垂直偏移”，本质是混淆了 SVG 文本的渲染锚点模型与几何包围盒模型。getBBox() 提供的是像素级包围信息，但 SVG 文本定位由 baseline 语义驱动。真正的居中，应交由 text-anchor 和 alignment-baseline 这类声明式属性完成——它们才是 SVG 规范定义的、跨字体/跨浏览器一致的居中机制。掌握这一点，比任何 +/- 像素调试都更可靠、更可维护。
