svg 的 标签不支持自动换行，需通过 text-anchor 控制水平对齐、dominant-baseline 设置垂直基准、 拆分多行并用 dy 调整行距；动态内容可借 foreignobject 或 js 测量分割。

SVG 的 <text></text> 标签本身不支持自动换行，也不像 HTML 那样按容器宽度折行。它的排版依赖坐标定位、基线理解与手动分段控制。掌握 text-anchor、dominant-baseline、 和 dy 的配合逻辑，才能实现稳定居中、多行对齐和视觉一致的文本渲染。

text-anchor 控制水平对齐基准

text-anchor 决定 x 坐标对应文字的哪一部分：start（左边缘）、middle（中心点）、end（右边缘）。它作用于整个 <text></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></text>，不能为每个 单独设置。

CSS3 SVG带控件的顶部导航栏代码

CSS3 SVG带控件的顶部导航栏代码是一款功能强大的带控件的超实用网页顶部导航栏。

下载

• 默认值 alphabetic：y 指向字母基线（a、x 等字符底部对齐线）
• dominant-baseline="middle"：y 更接近文字框视觉中心，适合居中场景
• dominant-baseline="hanging"：y 对齐汉字顶部或英文大写字母顶部，中文排版更稳

用 实现多行与行距控制

SVG 不解析换行符 \n，必须用 拆分内容，并通过 dy 控制行间偏移。推荐用 dy 而非重复设 y，避免计算误差。

• 首行 可设 dy="0em"，继承父 <text></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 作用域和缩放适配 <li> <strong>JS 动态分割</strong>：用 <code>getComputedTextLength() 测量每段宽度，在超限时插入新 。适合需要像素级控制的图表标注、仪表盘标题等场景