SVG的不支持自动换行，需用嵌套并设置dy控制行距，配合text-anchor和dominant-baseline实现居中对齐，注意单位、继承及字体度量差异。
SVG
SVG 的 要实现“换行”，必须拆成多个 对齐依赖两个层面：一是整段文本容器的定位（ 下面是一个三行、整体水平居中、行间间距 1.2em 的例子： 水平对齐靠 用 JavaScript 拼接或 React 渲染时，容易忽略单位、继承和坐标重置问题。 换行和对齐真正麻烦的不是语法，而是基线、度量、字体渲染差异这三层叠加——测一种字体行得通，换一种就偏几像素，这是 SVG 文本最常被低估的复杂点。 那样能根据宽度自动折行。直接写换行符 \n 或在 XML 中敲回车，浏览器会忽略——它只当空格或不渲染。
y（或 dy）来控制垂直偏移dy 而非绝对 y，避免重复计算基线用
x/y），二是内部各行的水平对齐（text-anchor + dominant-baseline）。居中对齐需配合 text-anchor="middle" 和 tspan 的 dx 或统一 x 值。
x="100" 定义了所有 text-anchor="middle"，所以文字以 x=100 为中点）dy="0em" 表示从 y="60" 开始；后续每行叠加 dy
dy="-0.6em" 起始，再逐行 +1.2em
text-anchor 和 dominant-baseline 的组合效果text-anchor（start/middle/end），垂直对齐靠 dominant-baseline（alphabetic/middle/hanging 等）。但注意：dominant-baseline 作用于整个 dy 是相对于前一个
dominant-baseline="alphabetic"，此时 y 指向字母基线，不是文字框中心dominant-baseline="middle" 可让 y 更接近视觉垂直中心，但需配合字体度量调整dy 控制行距比依赖 dominant-baseline 更可靠动态生成多行
dy 单位（如写 dy="1.2"）在部分浏览器中可能失效，必须写 dy="1.2em" 或 dy="16"（像素）text-anchor，需显式设置或依赖父级继承（多数浏览器会继承，但不保证）transform 缩放整个 dy 值也会被缩放——建议用 scale() 包裹外层 em 行高可能不均，可改用固定像素值如 dy="20" 更可控
