tspan本身不支持自动换行，需手动嵌套并用x/y或dx/dy控制位置；推荐用dy实现行距，配合dominant-baseline="hanging"和text-anchor统一基线与对齐。
SVG 中的 tspan 本身不支持自动换行，但可以通过手动嵌套多个 tspan 并配合 x、y、dx、dy 属性实现多行文本效果。关键在于理解偏移逻辑和父子关系，避免重叠或错位。
基础嵌套结构：用 tspan 模拟“换行”
tspan 必须嵌套在 text 元素内，每个 tspan 可独立设置位置。最简多行写法是：
<text x="20" y="40"> <tspan>第一行</tspan> <tspan x="20" y="70">第二行</tspan> <tspan x="20" y="100">第三行</tspan> </text>
注意：y 值需手动递增（如行高 ≈ 30），不能依赖默认继承；父 text 的 y 只影响第一个子 tspan 的基准线。
dx 与 dy：相对偏移更灵活
比起重复写 x/y，用 dx 和 dy 更适合逐行微调：
立即学习“前端免费学习笔记（深入）”；
-
dx相对于前一个tspan的x值水平偏移（不影响后续行） -
dy相对于前一个tspan的y值垂直偏移（推荐用于行距） - 首行
tspan若无x/y，会继承父text的坐标
示例：
<text x="20" y="40"> <tspan>标题</tspan> <tspan dx="0" dy="24">副标题</tspan> <tspan dx="0" dy="24">说明文字</tspan> </text>
对齐与基线控制：避免文字“漂移”
多行时容易因字体基线差异导致视觉错位。解决方法：
- 统一设置
dominant-baseline="middle"或"hanging"（推荐hanging，更接近常见排版习惯） - 配合
text-anchor="start"（默认）确保x始终对齐左边缘 - 若某行需居中，单独给该
tspan加x和text-anchor="middle"
例如：
<text x="100" y="50" dominant-baseline="hanging"> <tspan>左对齐第一行</tspan> <tspan x="100" text-anchor="middle" dy="24">居中第二行</tspan> </text>
动态生成时的注意事项
JS 拼接或模板渲染多行 tspan 时需留意：
- 不要遗漏闭合标签（
），XML 严格模式下会报错 - 避免在
tspan内再嵌套tspan（虽语法允许，但易引发继承混乱） - 行高建议用
dy统一计算：比如font-size="16"时，dy="1.5em"≈ 24px，比固定像素更适配缩放
可读性优先：每行一个 tspan，显式声明 dy，比堆砌 transform 更直观可靠。
