SVG 的 <text> 标签不支持自动换行，需通过 text-anchor 控制水平对齐、dominant-baseline 设置垂直基准、<tspan> 拆分多行并用 dy 调整行距；动态内容可借 foreignObject 或 JS 测量分割。
SVG 的 <text> 标签本身不支持自动换行，也不像 HTML 那样按容器宽度折行。它的排版依赖坐标定位、基线理解与手动分段控制。掌握 text-anchor、dominant-baseline、
text-anchor 控制水平对齐基准
text-anchor 决定 x 坐标对应文字的哪一部分：start（左边缘）、middle（中心点）、end（右边缘）。它作用于整个 <text> 元素，是水平居中的关键。
- 设
text-anchor="middle"时，x="100"表示文字整体水平中心落在 x=100 处 - 设
text-anchor="end"时，x="100"表示最后一字符右边缘在 x=100 - 若未设置，默认为
start，此时x对应第一字符左边界
dominant-baseline 定义垂直对齐参考线
dominant-baseline 指定 y 坐标所对齐的字体度量线（如 alphabetic、hanging、middle），影响文字在垂直方向上的“落点”。它作用于整个 <text>，不能为每个
- 默认值
alphabetic：y 指向字母基线（a、x 等字符底部对齐线） -
dominant-baseline="middle"：y 更接近文字框视觉中心，适合居中场景 -
dominant-baseline="hanging"：y 对齐汉字顶部或英文大写字母顶部，中文排版更稳
用 实现多行与行距控制
SVG 不解析换行符 \n，必须用 dy 控制行间偏移。推荐用 dy 而非重复设 y，避免计算误差。
- 首行
可设 dy="0em"，继承父<text>的 y 基准 - 后续每行叠加
dy="1.2em"（1.2 倍 font-size），形成统一行高 - 所有
应保持相同 x值（如x="100"），配合text-anchor="middle"实现整体居中 - 务必写明单位（如
dy="1.2em"或dy="16"），省略单位在部分浏览器中失效
自动换行的两种实用路径
静态内容建议用
-
foreignObject + HTML：嵌入
<div style="word-wrap: break-word">，由浏览器自动折行。兼容性好，但 IE 不支持，且需注意 CSS 作用域和缩放适配 -
JS 动态分割：用
getComputedTextLength()测量每段宽度，在超限时插入新。适合需要像素级控制的图表标注、仪表盘标题等场景
