17370845950

要实现“换行”，必须拆成多个 元素，或用 手动控制每行位置。

• 必须嵌套在 内，不能单独存在
• 每行 需显式设置 y（或 dy）来控制垂直偏移
• 推荐用 dy 而非绝对 y，避免重复计算基线

用 实现多行并居中对齐

对齐依赖两个层面：一是整段文本容器的定位（x/y），二是内部各行的水平对齐（text-anchor + dominant-baseline）。居中对齐需配合 的 text-anchor="middle" 和 tspan 的 dx 或统一 x 值。

下面是一个三行、整体水平居中、行间间距 1.2em 的例子：

  第一行
  第二行
  第三行

• 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 更可靠

动态生成多行 时的常见坑

用 JavaScript 拼接或 React 渲染时，容易忽略单位、继承和坐标重置问题。

• 省略 dy 单位（如写 dy="1.2"）在部分浏览器中可能失效，必须写 dy="1.2em" 或 dy="16"（像素）
• 不继承父 的 text-anchor，需显式设置或依赖父级继承（多数浏览器会继承，但不保证）
• 若用 transform 缩放整个 ，dy 值也会被缩放——建议用 scale() 包裹外层 ，而非直接作用

  

  于
• 中文/emoji 混排时，em 行高可能不均，可改用固定像素值如 dy="20" 更可控

换行和对齐真正麻烦的不是语法，而是基线、度量、字体渲染差异这三层叠加——测一种字体行得通，换一种就偏几像素，这是 SVG 文本最常被低估的复杂点。