---
date: 2026-05-10
tags: [svg, design, typography, debugging-with-vision]
---

# SVG `dominant-baseline="central"` ≠ 视觉居中（大写字母会偏上）

## 现象

做 monogram 头像（CT 字母居中放方块里），即使设了：

```svg
<text x="128" y="128" dominant-baseline="central" text-anchor="middle">CT</text>
```

实际渲染**字母明显偏上**——上方留白 ~60px，下方 ~95px（256 viewBox）。
通过 Playwright MCP 截图实际页面才发现，视觉上一直觉得"差点意思"。

## 根因

`dominant-baseline="central"` 对齐的是 **alphabetical baseline 的中心**：

```
┌─────────────┐  ← cap top
│  ╔══════╗   │
│  ║      ║   │  ← cap height（大写字母真正的视觉中心在这里）
│  ║      ║   │
│  ╚══════╝   │  ← alphabetical baseline
│             │  ← descender 预留区域（gjpqy 才用，CT 不用）
└─────────────┘  ← font 包围盒底部
```

`central` 把"包围盒中心"当居中点，但大写字母 cap-height 的真实视觉中心在 baseline **上方** ~30-40% font-size 处。结果：字符往上跑。

## 修复

简单可靠的做法是手工往下推 ~5-8% 的 viewBox 高度：

```svg
<!-- 256 viewBox 里 +10 ~ +14 -->
<text x="128" y="142" dominant-baseline="central" ...>CT</text>
```

具体偏移量看字体（SF Pro / Inter / Helvetica 不一样），需要肉眼调。

更精确做法：用 `<g transform="translate(0,offset)">` 包文字，或先用 `font-size` 算 `(font-size * 0.07)` 作为偏移。

## 调试关键：肉眼对照

这个问题肉眼能立刻看出，但纯靠脑补 SVG 看不出。两个有效手段：
1. **AI Read 渲染后 PNG**——多模态 vision 立刻发现"看着偏上"
2. **Playwright MCP 截图实际页面**——把头像放在 Gitea 真实 UI context 里，跟 AI bot 头像对比立判

我之前几版迭代都是闭眼写 SVG，等用户反馈才知道丑——直到用户提示我可以 Read 图片，立刻定位多个问题（字距 -12 撞字 / 字号 195 溢出 / 视觉偏上）。

## 通用经验

任何视觉产物（avatar / logo / 图表 / 报告截图），在交付给用户前**自己先 Read 看一眼**——bash 算的数字 / SVG 写的属性 / 尺寸看着都对，但视觉感受是另一个维度，必须用眼睛验证。同理：
- 调 CSS 不只看 dev tools 数值，开 Playwright 截图
- 生成 chart / graph 不只看 data，render 出来 Read
- 文档 PDF 排版不只看源 markdown，导出后 Read

不要把"语法 / 数据正确"等同于"视觉正确"。