SVG文字：text

发表于 更新于 分类于 ， ， ， 阅读次数：

本篇涵盖文本排版相关的元素：<text>，该元素用于标注与排版，常搭配用于标签、标题、图表文字。

核心元素

<text> — 基础文本块

  • 用途：单行或多行文本容器，其中每行文字由一个独立的 <text> 或使用 <tspan> 细分。

  • 常用属性

    • x：文字起点 x 坐标
    • y：文字基线 y 坐标
    • font-size：字体大小
    • fill：文字颜色
    • text-anchor：对齐方式
    • font-family：字体（如 PingFang SC, Arial）
    • font-weight / font-style：字重与字形（如 bold / italic）
    • stroke / stroke-width / paint-order：描边颜色/宽度/绘制顺序（paint-order: stroke fill 可避免描边遮挡文字）
    • dominant-baseline：垂直基线对齐（如 middle, hanging, ideographic）
    • alignment-baseline：相对父元素的基线对齐（细粒度对齐控制）
    • dx / dy：逐字符偏移（可为列表，对每个字单独位移）
    • rotate：逐字符旋转（可为列表）
    • letter-spacing / word-spacing：字间距/词间距
    • direction / unicode-bidi：文字方向与双向文本（如 direction="rtl", unicode-bidi="bidi-override"）
    • writing-mode：书写方向（如 vertical-rl 竖排）
    • textLength / lengthAdjust：固定文本视觉长度与拉伸方式（spacing 或 spacingAndGlyphs）
    • xml:space="preserve"：保留空白与换行（常配合 CSS white-space 使用）

  • 子元素：通常包含文本内容或 <tspan> 子元素。

<tspan> — 文本段分割

  • 用途：在 <text> 内创建独立的文本段，用于分行、改变局部样式或逐行定位。
  • 常用属性：
    • x / y：段起点坐标（设置后会绝对定位，忽略父级偏移）
    • dx / dy：相对偏移（相对上一段落的终点）
    • font-size、fill、font-weight 等：段落级样式覆盖
    • baseline-shift：基线偏移（用于上标/下标）
  • 典型场景：多行标题、突出词汇、上下标、分段着色。

<textPath> — 路径文字

  • 用途：将文本沿着 <path> 或其他基本形状路径排版，用于曲线标题、徽标、装饰性文本。
  • 常用属性：
    • href 或 xlink:href：引用路径 ID（如 #curve）
    • startOffset：文本起点在路径上的位置（长度值或百分比）
    • text-anchor：对齐方式（start、middle、end）
    • side：侧边选择（left 或 right，用于文本如何沿路径排版）
  • 典型场景：圆形徽标、波形标题、沿曲线排列的说明文字。

示例

基础用法:

1
2
3
4
5
<svg width="200" height="60" xmlns="http://www.w3.org/2000/svg">
  <!-- 居中显示一行文字 -->
  <text x="100" y="35" font-size="24" fill="#455A64" text-anchor="middle">Hello SVG</text>
  
</svg>
  • 成品展示：
Hello SVG

多行文本与居中排版（<tspan> + dy）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<svg width="320" height="120" xmlns="http://www.w3.org/2000/svg" style="background:#fafafa">
  <line x1="160" y1="10" x2="160" y2="110" stroke="#E0E0E0"/>
  <text x="160" y="30" font-size="18" text-anchor="middle" fill="#37474F">
    <tspan x="160" dy="0">多行标题</tspan>
    <tspan x="160" dy="24" font-size="14" fill="#607D8B">使用 tspan 进行分行</tspan>
    <tspan x="160" dy="22" font-size="12" fill="#90A4AE">并保持居中对齐</tspan>
  </text>
  
  <!-- 基线辅助线 -->
  <g stroke="#B0BEC5" stroke-dasharray="4 3">
    <line x1="10" y1="30" x2="310" y2="30"/>
    <line x1="10" y1="54" x2="310" y2="54"/>
    <line x1="10" y1="76" x2="310" y2="76"/>
  </g>
  
</svg>
  • 成品展示：
多行标题 使用 tspan 进行分行 并保持居中对齐

固定宽度标签（textLength + lengthAdjust）：

1
2
3
4
5
6
7
8
9
10
11
12
13
<svg width="360" height="80" xmlns="http://www.w3.org/2000/svg" style="background:#fff">
  <rect x="20" y="20" width="150" height="36" rx="8" fill="#E3F2FD" stroke="#90CAF9"/>
  <!-- 指定文本视觉长度恰好为 150px，自动调整字间距与字形宽度 -->
  <text x="20" y="45" dy="0" font-size="18" fill="#0D47A1" textLength="150" lengthAdjust="spacingAndGlyphs">
    自适应宽度标签
  </text>

  <rect x="190" y="20" width="150" height="36" rx="8" fill="#FCE4EC" stroke="#F48FB1"/>
  <!-- 仅调整字间距（不压缩字形） -->
  <text x="190" y="45" font-size="18" fill="#AD1457" textLength="150" lengthAdjust="spacing">
    仅调字间距
  </text>
</svg>
  • 成品展示：
自适应宽度标签 仅调字间距

路径文字（<textPath>）：

1
2
3
4
5
6
7
8
9
<svg width="360" height="120" xmlns="http://www.w3.org/2000/svg" style="background:#ffffff">
  <defs>
    <path id="curve" d="M20,80 Q180,10 340,80" fill="none" stroke="#E0E0E0"/>
  </defs>
  <use href="#curve" />
  <text font-size="18" fill="#2E7D32">
    <textPath href="#curve" startOffset="50%" text-anchor="middle">沿曲线路径排版的文本 textPath</textPath>
  </text>
</svg>
  • 成品展示：
沿曲线路径排版的文本 textPath

基线对齐与垂直定位（dominant-baseline）：

1
2
3
4
5
6
7
8
<svg width="360" height="120" xmlns="http://www.w3.org/2000/svg" style="background:#FAFAFA">
  <!-- 参考线 -->
  <line x1="20" y1="60" x2="340" y2="60" stroke="#BDBDBD" stroke-dasharray="5 4"/>

  <text x="60"  y="60" font-size="16" dominant-baseline="hanging" fill="#455A64">hanging</text>
  <text x="150" y="60" font-size="16" dominant-baseline="middle"  fill="#455A64">middle</text>
  <text x="240" y="60" font-size="16" dominant-baseline="ideographic" fill="#455A64">ideographic</text>
</svg>
  • 成品展示：
hanging middle ideographic

竖排与逐字控制（writing-mode / dx / rotate）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<svg width="360" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#fff">
  <!-- 竖排 -->
  <text x="60" y="20" writing-mode="vertical-rl" font-size="18" fill="#1E88E5">
    竖排文字示例
  </text>

  <!-- 逐字位移与旋转 -->
  <text x="140" y="80" font-size="18" fill="#6A1B9A" dx="0 4 8 12 16" rotate="0 5 10 15 20">
    Glyphs
  </text>

  <!-- 描边字 + 绘制顺序避免遮挡 -->
  <text x="240" y="80" font-size="24" fill="#FFFFFF" stroke="#EF6C00" stroke-width="2" style="paint-order: stroke fill;">描边文字</text>
</svg>
  • 成品展示：
竖排文字示例 Glyphs 描边文字

小贴士

  • 对齐：水平用 text-anchor，垂直用 dominant-baseline；配合参考线便于调试。
  • 多行：使用 <tspan> 控制分行与局部样式；SVG 不识别 \n 自动换行。
  • 固定宽度：textLength 适合标签/按钮；lengthAdjust 选 spacingAndGlyphs 更贴合宽度。
  • 路径文本：<textPath> 适合徽标与装饰标题；startOffset 控制起点位置。
  • 竖排/东亚排版：优先用 writing-mode: vertical-rl；如含英文可配合 letter-spacing 微调。
  • 逐字控制：dx/dy/rotate 支持列表，便于实现节奏感与装饰效果。
  • 空白：需要保留空格/换行时加 xml:space="preserve"，再用 CSS white-space 调整呈现。