svg 是唯一合法的矢量文字渲染方式，它是原生图形元素，可缩放、变换、裁剪；不支持自动换行，多行需用 ，沿路径排字须用 内嵌 。
SVG <text></text> 是唯一合法的矢量文字渲染方式
HTML 里不能用 <div> 或 <code><p></p> 往 SVG 里塞文字——那些是 DOM 块级元素，不参与 SVG 坐标系和变换；<text></text> 才是 SVG 规范定义的**原生图形元素**，它和 <circle></circle>、<path></path> 一样可缩放、可描边、可裁剪、可被 transform 影响。浏览器渲染时，它走的是矢量图形管线，不是 HTML 布局引擎。
常见错误现象：
– 把 <span>Hello</span> 直接写在 <svg></svg> 里，结果完全不显示；
– 用 CSS position: absolute 叠在 SVG 上“模拟”文字，缩放后错位、模糊、无法选中；
– 试图给 <text></text> 加 class 后用外部 CSS 控制换行或自动高度，无效。
关键点：
– 它没有盒模型，不响应 width/height 或 display: block；
– 字体度量（如 ascent/descent）由实际字体文件决定，不同系统可能微差；
– 渲染精度依赖于浏览器对 OpenType 字体表的支持，特别是 text-rendering: optimizeLegibility 的实际生效情况。
<text></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></text> 内多个 x 值（如 x="10 30 50"）可为每个字符单独定位，但需注意空格也被计为字符，数量必须严格匹配。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
多行文本必须用 <tspan></tspan>，且 dy 比 y 更可靠
SVG 不支持自动换行，<textarea></textarea> 或 CSS white-space 在 <text></text> 里完全无效。所有换行、局部样式、微调都得靠 <tspan></tspan>。
常见踩坑：
– 第二个 <tspan></tspan> 写 y="130"，结果位置不对：因为 y 是绝对坐标，而前一个 <tspan></tspan> 的实际高度受字体、font-size、line-height（无此属性！）影响，难以精确预估；
– 正确做法是统一用 dy：第一个 <tspan></tspan> 用父 <text></text> 的 y，后续全用 dy="1.2em" 或具体像素值（如 dy="24"），它是相对于前一个 <tspan></tspan> 底部的偏移；
– dx 同理，适合微调标点、图标或首行缩进，比如 <tspan dx="8">→</tspan><tspan>开始操作</tspan>；
– <tspan></tspan> 可嵌套，也能独立设 fill、font-weight，但无法继承父级未显式声明的属性（如 font-family 需重复写或提至 <text></text>）。
沿路径排字用 <textpath></textpath>，但 <tspan></tspan> 仍要嵌在里面
<textpath></textpath> 能让文字贴着 <path></path> 弯曲，但它本身不支持样式切换或换行。所有富文本能力依然得靠内部的 <tspan></tspan>。
注意事项：
– href 必须指向同文档内已定义的 <path></path> ID，且用现代写法 href="#my-path"，旧式 xlink:href 在部分新浏览器中已弃用；
– <tspan></tspan> 的 dx/dy 在路径上下文中意义改变：它们变成沿路径切线方向的位移，数值过大易导致文字断裂或重叠；
– 路径太短或文字过长时，超出部分默认被裁剪，加 startOffset="50%" 可手动控制起始位置；
– <foreignobject></foreignobject> 不能塞进 <textpath></textpath>，规范禁止，Chrome/Firefox/Safari 全部静默忽略，连报错都不会有。
复杂点往往卡在路径几何和字体度量的耦合上：同一段 <textpath></textpath> 在不同字号下，弯曲弧度感知完全不同；而中英文混排时，dominant-baseline 切换又会影响整体对齐。这些没法靠一次设置搞定，得实测+微调。
