SVG 中添加文字必须使用 元素，其 x/y 坐标指向首字符基线起点；多行需用 ，沿路径排字须确保 同根、ID 准确、用 href（非 xlink:href）；字体与字距需注意兼容性及内联处理。
<text></text> 元素是 SVG 中添加文字的唯一标准方式，不是可选方案，而是必须用它——没有 <div>、<code><p></p> 或 CSS 伪元素能替代它在矢量上下文里渲染可缩放、可样式化、可脚本控制的文本。
text 的 x/y 坐标到底指哪儿？
x 和 y 不是指左上角，也不是文字框中心，而是**首字符基线起点**（baseline origin）。这个点默认落在字母“x”的底部附近，所以当你设 y="20"，实际看到的文字主体会“浮”在 y=20 线上方一点。
- 若想让文字视觉上“垂直居中”于某个容器高度，别只调
y，要配dominant-baseline="central"或"middle" -
text-anchor="middle"配合x="150"才能让整段文字水平居中于 x=150 这条竖线 - Android WebView 或旧版 Safari 对
dominant-baseline支持弱，"alphabetic"（默认）最稳；中文建议试"hanging"，顶部对齐更自然
多行文字不能只靠换行符
<text></text> 默认忽略 \n 和空格折叠，写 <text>第一行\n第二行</text> 会糊成一行。真要多行，必须用 <tspan></tspan>：
<text x="50" y="40"> <tspan x="50" dy="0">第一行</tspan> <tspan x="50" dy="24">第二行</tspan> </text>
-
dy是相对于上一行的增量偏移，比重复写y更可靠 - 每行
<tspan></tspan>可单独设fill、font-weight，适合标题+副标组合 - 避免用
dx微调单字位置——不同字体度量差异大，一换字体就错位
textPath 沿路径排字时 href 失效的常见原因
写好 <path id="arc"></path>，再用 <textpath href="#arc"></textpath> 却不显示文字？大概率是这三处之一：
-
<path></path>没放在<textpath></textpath>同一 SVG 根下（比如被包在<defs></defs>里但没正确引用） - ID 名拼写不一致，大小写敏感，
#Arc≠#arc - SVG 版本混用：
xlink:href（SVG 1.1）在现代浏览器已弃用，必须用href（SVG 2.0+）
验证方法：打开开发者工具，检查该 <path></path> 是否真实存在于 DOM 中，且 ID 可被 document.getElementById() 获取到。
立即学习“前端免费学习笔记（深入）”；
字体和字间距的兼容性陷阱
用 Web 字体时，font-family 必须和 @font-face 声明的 font-family 完全一致（包括引号、空格、连字符），否则回退到系统字体。
-
letter-spacing在 Chrome/Firefox/Safari 15.4+ 可用，但 iOS 15 以下 Safari 不支持，慎用 - 需要精确字距又得保兼容？用
<tspan dx="X"></tspan>手动布点，虽然啰嗦但 100% 可控 - 导出独立 SVG 文件时，别指望外部 CSS 生效——把
@font-faceBase64 编码后塞进 SVG 内的<style></style>里才真正自包含
最易被忽略的一点：<text></text> 的渲染依赖字体度量数据，如果字体加载延迟或失败，文字可能突然“跳动”或尺寸错乱——务必监听 document.fonts.load() 或 fallback 到安全字体。
