跳到主要内容

文本

SVG 提供了强大的文本渲染能力，不仅可以显示基本文本，还支持文本样式、沿路径排列、文本换行等高级功能。与 HTML 文本不同，SVG 文本是图形元素，可以进行填充、描边、变换和滤镜处理。

基本文本​

使用 <text> 元素添加文本：

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="50" y="50" font-family="Arial" font-size="24" fill="#2c3e50">
    Hello, SVG!
  </text>
</svg>

文本定位​

x 和 y 属性定义文本的基准点位置。默认情况下，y 值对应文本基线（baseline）位置，而不是文本顶部。

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="50" x2="300" y2="50" stroke="#bdc3c7" stroke-dasharray="5"/>
  <text x="50" y="50" font-family="Arial" font-size="24" fill="#e74c3c">
    基线位置
  </text>
  <circle cx="50" cy="50" r="3" fill="#e74c3c"/>
</svg>

文本锚点​

text-anchor 属性控制文本相对于基准点的水平对齐方式：

值效果
start（默认）文本从基准点开始
middle文本以基准点为中心
end文本在基准点结束
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <line x1="150" y1="0" x2="150" y2="150" stroke="#bdc3c7" stroke-dasharray="5"/>
  <text x="150" y="40" text-anchor="start" font-size="18" fill="#e74c3c">Start 锚点</text>
  <text x="150" y="80" text-anchor="middle" font-size="18" fill="#3498db">Middle 锚点</text>
  <text x="150" y="120" text-anchor="end" font-size="18" fill="#2ecc71">End 锚点</text>
</svg>

垂直对齐​

dominant-baseline 属性控制文本的垂直对齐方式：

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="50" x2="300" y2="50" stroke="#bdc3c7"/>
  <text x="20" y="50" dominant-baseline="auto" font-size="16" fill="#e74c3c">auto</text>
  <text x="80" y="50" dominant-baseline="middle" font-size="16" fill="#3498db">middle</text>
  <text x="160" y="50" dominant-baseline="hanging" font-size="16" fill="#2ecc71">hanging</text>
  <text x="250" y="50" dominant-baseline="text-top" font-size="16" fill="#9b59b6">text-top</text>
</svg>

字体属性​

SVG 文本支持与 CSS 相同的字体属性：

常用字体属性​

属性说明示例
font-family字体名称Arial, sans-serif
font-size字体大小24px, 1.5em
font-weight字体粗细normal, bold, 700
font-style字体样式normal, italic
text-decoration文本装饰none, underline, line-through
letter-spacing字母间距2px
word-spacing单词间距5px
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="30" font-family="Arial" font-size="16" fill="#2c3e50">普通文本</text>
  <text x="20" y="60" font-family="Georgia" font-size="20" font-weight="bold" fill="#2c3e50">粗体文本</text>
  <text x="20" y="90" font-family="Arial" font-size="16" font-style="italic" fill="#2c3e50">斜体文本</text>
  <text x="20" y="120" font-family="Arial" font-size="16" text-decoration="underline" fill="#2c3e50">下划线文本</text>
  <text x="20" y="150" font-family="Arial" font-size="16" letter-spacing="5" fill="#2c3e50">字母间距</text>
  <text x="20" y="180" font-family="Arial" font-size="16" fill="#2c3e50" stroke="#e74c3c" stroke-width="0.5">描边文本</text>
</svg>

tspan 元素​

<tspan> 元素用于在文本内部创建子片段，可以单独设置样式或位置。类似于 HTML 中的 <span> 元素。

样式分段​

<svg width="300" height="50" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="30" font-size="18">
    <tspan fill="#e74c3c">红色</tspan>
    <tspan fill="#3498db">蓝色</tspan>
    <tspan fill="#2ecc71">绿色</tspan>
  </text>
</svg>

位置偏移​

<tspan> 可以使用 x、y、dx、dy 属性调整位置：

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="30" font-size="18" fill="#2c3e50">
    <tspan>第一行</tspan>
    <tspan x="20" dy="30">第二行（相对偏移）</tspan>
    <tspan x="20" dy="30">第三行</tspan>
  </text>
</svg>
  • x、y：设置绝对坐标
  • dx、dy：设置相对偏移量

字符旋转​

rotate 属性可以旋转单个字符：

<svg width="300" height="50" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="30" font-size="24" fill="#9b59b6">
    <tspan rotate="0 15 30 45 60 75 90 75 60 45 30 15 0">旋转文字效果</tspan>
  </text>
</svg>

rotate 属性接受一组角度值，每个值对应一个字符。

文本路径 - textPath​

<textPath> 元素可以让文本沿着任意路径排列，创建创意排版效果。

基本用法​

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="curve" d="M 20 100 Q 150 -20, 280 100" fill="none"/>
  </defs>
  <text font-size="18" fill="#3498db">
    <textPath href="#curve">
      文本沿着曲线路径排列
    </textPath>
  </text>
  <path d="M 20 100 Q 150 -20, 280 100" fill="none" stroke="#bdc3c7" stroke-dasharray="5"/>
</svg>

起始偏移​

startOffset 属性设置文本在路径上的起始位置：

<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="arc" d="M 20 120 A 130 80 0 0 1 280 120" fill="none"/>
  </defs>
  <text font-size="16" fill="#2c3e50">
    <textPath href="#arc" startOffset="0%">
      从起点开始
    </textPath>
  </text>
  <text font-size="16" fill="#e74c3c">
    <textPath href="#arc" startOffset="50%">
      从中间开始
    </textPath>
  </text>
  <path d="M 20 120 A 130 80 0 0 1 280 120" fill="none" stroke="#bdc3c7" stroke-dasharray="5"/>
</svg>

圆形文本​

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="circle" d="M 100 100 m -80 0 a 80 80 0 1 1 160 0 a 80 80 0 1 1 -160 0" fill="none"/>
  </defs>
  <text font-size="14" fill="#2c3e50">
    <textPath href="#circle">
      文本沿着圆形路径排列，形成环形文字效果
    </textPath>
  </text>
</svg>

方法属性​

method 属性控制文本沿路径的渲染方式：

  • align（默认）：字符对齐到路径
  • stretch：字符拉伸以适应路径
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path id="wave" d="M 10 50 Q 80 10, 150 50 T 290 50" fill="none"/>
  </defs>
  <text font-size="16" fill="#3498db">
    <textPath href="#wave" method="align">Align 方法渲染</textPath>
  </text>
  <text font-size="16" fill="#e74c3c" dy="30">
    <textPath href="#wave" method="stretch">Stretch 方法渲染</textPath>
  </text>
</svg>

文本长度控制​

textLength 属性​

textLength 属性强制设置文本的计算长度，浏览器会自动调整字符间距以适应：

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="10" width="260" height="30" fill="#ecf0f1"/>
  <text x="20" y="30" font-size="16" fill="#2c3e50" textLength="260">
    自动调整间距
  </text>
  <rect x="20" y="50" width="260" height="30" fill="#ecf0f1"/>
  <text x="20" y="70" font-size="16" fill="#e74c3c" textLength="260">
    短文本也会被拉伸
  </text>
</svg>

lengthAdjust 属性​

lengthAdjust 属性控制如何调整文本长度：

  • spacing（默认）：只调整字符间距
  • spacingAndGlyphs：同时调整字符间距和字形宽度
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="20" y="30" font-size="16" fill="#3498db" textLength="260" lengthAdjust="spacing">
    spacing 模式
  </text>
  <text x="20" y="70" font-size="16" fill="#e74c3c" textLength="260" lengthAdjust="spacingAndGlyphs">
    spacingAndGlyphs 模式
  </text>
</svg>

文本选择与交互​

可选择文本​

默认情况下，SVG 文本可以被选择。可以通过 CSS 控制选择行为：

<svg width="300" height="50" xmlns="http://www.w3.org/2000/svg">
  <style>
    .selectable { user-select: text; }
    .non-selectable { user-select: none; }
  </style>
  <text x="20" y="30" class="selectable" font-size="16" fill="#2c3e50">这段文本可以选择</text>
</svg>

文本链接​

使用 <a> 元素可以创建可点击的文本链接：

<svg width="300" height="50" xmlns="http://www.w3.org/2000/svg">
  <a href="https://developer.mozilla.org" target="_blank">
    <text x="20" y="30" font-size="16" fill="#3498db" style="cursor: pointer;">
      MDN Web Docs
    </text>
  </a>
</svg>

实用示例​

标题样式​

<svg width="400" height="80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="titleGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#e74c3c"/>
      <stop offset="50%" stop-color="#f39c12"/>
      <stop offset="100%" stop-color="#3498db"/>
    </linearGradient>
  </defs>
  <text x="200" y="50" text-anchor="middle" font-family="Arial" font-size="36" 
        font-weight="bold" fill="url(#titleGrad)">
    渐变标题
  </text>
</svg>

立体文字​

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <text x="52" y="62" font-family="Arial" font-size="40" font-weight="bold" fill="#7f8c8d">
    立体效果
  </text>
  <text x="50" y="60" font-family="Arial" font-size="40" font-weight="bold" fill="#2c3e50">
    立体效果
  </text>
</svg>

描边文字​

<svg width="300" height="80" xmlns="http://www.w3.org/2000/svg">
  <text x="150" y="50" text-anchor="middle" font-family="Arial" font-size="40" 
        font-weight="bold" fill="none" stroke="#3498db" stroke-width="2">
    空心文字
  </text>
</svg>

双色描边​

<svg width="300" height="80" xmlns="http://www.w3.org/2000/svg">
  <text x="150" y="50" text-anchor="middle" font-family="Arial" font-size="40" 
        font-weight="bold" fill="#2c3e50" stroke="#e74c3c" stroke-width="1" 
        paint-order="stroke">
    双色文字
  </text>
</svg>

文本背景​

<svg width="300" height="60" xmlns="http://www.w3.org/2000/svg">
  <rect x="40" y="15" width="220" height="35" rx="5" fill="#3498db"/>
  <text x="150" y="40" text-anchor="middle" font-family="Arial" font-size="20" 
        font-weight="bold" fill="#fff">
    带背景的文字
  </text>
</svg>

小结​

SVG 文本提供了丰富的排版能力。基本文本通过 text 元素创建，tspan 用于分段样式和定位，textPath 实现沿路径排列。字体属性与 CSS 兼容，文本可以进行填充、描边和变换。通过组合这些技术，可以创建各种创意文字效果。