SVG <text> 是唯一合法的矢量文字渲染方式，它是原生图形元素，可缩放、变换、裁剪；不支持自动换行，多行需用 <tspan>，沿路径排字须用 <textPath> 内嵌 <tspan>。
SVG <text> 是唯一合法的矢量文字渲染方式
HTML 里不能用 <div> 或 <p> 往 SVG 里塞文字——那些是 DOM 块级元素，不参与 SVG 坐标系和变换；<text> 才是 SVG 规范定义的**原生图形元素**，它和 <circle>、<path> 一样可缩放、可描边、可裁剪、可被 transform 影响。浏览器渲染时，它走的是矢量图形管线，不是 HTML 布局引擎。
常见错误现象：
– 把 <span>Hello</span> 直接写在 <svg> 里，结果完全不显示；
– 用 CSS position: absolute 叠在 SVG 上“模拟”文字，缩放后错位、模糊、无法选中；
– 试图给 <text> 加 class 后用外部 CSS 控制换行或自动高度，无效。
关键点：
– 它没有盒模型，不响应 width/height 或 display: block；
– 字体度量（如 ascent/descent）由实际字体文件决定，不同系统可能微差；
– 渲染精度依赖于浏览器对 OpenType 字体表的支持，特别是 text-rendering: optimizeLegibility 的实际生效情况。
<text> 的 x/y 不是左上角，而是基线起点
设 y="100"，文字不会“顶着” y=100 这条线，而是字母“x”的底部（alphabetic baseline）落在那里。大写字母（如 H）会向上伸出，小写字母 g/j/p 会向下延伸。这就是为什么你常看到文字“飘”在坐标线上方，或汉字整体下沉。
立即学习“前端免费学习笔记（深入）”；
实用建议：
– 想让文字视觉垂直居中于某高度（比如容器高 200px），别只调 y，加 dominant-baseline="middle" 并配合 y="100"；
– 中文/日文排版更推荐 dominant-baseline="hanging"，此时 y 值接近汉字顶部，控制感更强；
– text-anchor="middle" 配合 x="150" 才能让整段文字水平居中于竖线 x=150，而不是“首字居中”；
– 单个 <text> 内多个 x 值（如 x="10 30 50"）可为每个字符单独定位，但需注意空格也被计为字符，数量必须严格匹配。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
多行文本必须用 <tspan>，且 dy 比 y 更可靠
SVG 不支持自动换行，<textarea> 或 CSS white-space 在 <text> 里完全无效。所有换行、局部样式、微调都得靠 <tspan>。
常见踩坑：
– 第二个 <tspan> 写 y="130"，结果位置不对：因为 y 是绝对坐标，而前一个 <tspan> 的实际高度受字体、font-size、line-height（无此属性！）影响，难以精确预估；
– 正确做法是统一用 dy：第一个 <tspan> 用父 <text> 的 y，后续全用 dy="1.2em" 或具体像素值（如 dy="24"），它是相对于前一个 <tspan> 底部的偏移；
– dx 同理，适合微调标点、图标或首行缩进，比如 <tspan dx="8">→</tspan><tspan>开始操作</tspan>；
– <tspan> 可嵌套，也能独立设 fill、font-weight，但无法继承父级未显式声明的属性（如 font-family 需重复写或提至 <text>）。
沿路径排字用 <textPath>，但 <tspan> 仍要嵌在里面
<textPath> 能让文字贴着 <path> 弯曲，但它本身不支持样式切换或换行。所有富文本能力依然得靠内部的 <tspan>。
注意事项：
– href 必须指向同文档内已定义的 <path> ID，且用现代写法 href="#my-path"，旧式 xlink:href 在部分新浏览器中已弃用；
– <tspan> 的 dx/dy 在路径上下文中意义改变：它们变成沿路径切线方向的位移，数值过大易导致文字断裂或重叠；
– 路径太短或文字过长时，超出部分默认被裁剪，加 startOffset="50%" 可手动控制起始位置；
– <foreignObject> 不能塞进 <textPath>，规范禁止，Chrome/Firefox/Safari 全部静默忽略，连报错都不会有。
复杂点往往卡在路径几何和字体度量的耦合上：同一段 <textPath> 在不同字号下，弯曲弧度感知完全不同；而中英文混排时，dominant-baseline 切换又会影响整体对齐。这些没法靠一次设置搞定，得实测+微调。
