SVG 文本

<text> 元素用于在 SVG 中添加文本内容，支持丰富的样式和效果。

基本语法

<svg width="200" height="50">
  <text x="10" y="35" font-size="24" fill="#3b82f6">Hello SVG</text>
</svg>

主要属性

属性	描述
x	文本起始 x 坐标
y	文本基线 y 坐标
dx	x 方向偏移
dy	y 方向偏移
text-anchor	文本对齐方式
font-size	字体大小
font-family	字体族
font-weight	字体粗细
fill	文本颜色
stroke	文本描边

基础文本

<svg width="400" height="100">
  <text x="20" y="40" font-size="32" fill="#1f2937">普通文本</text>
  <text x="20" y="80" font-size="24" fill="#3b82f6" font-weight="bold">粗体文本</text>
</svg>

文本对齐 (text-anchor)

<svg width="400" height="150">
  <!-- 参考线 -->
  <line x1="200" y1="0" x2="200" y2="150" stroke="#e5e7eb" stroke-dasharray="5"/>
  
  <!-- start（默认） -->
  <text x="200" y="40" font-size="18" fill="#3b82f6" text-anchor="start">start 对齐</text>
  
  <!-- middle -->
  <text x="200" y="80" font-size="18" fill="#22c55e" text-anchor="middle">middle 对齐</text>
  
  <!-- end -->
  <text x="200" y="120" font-size="18" fill="#ef4444" text-anchor="end">end 对齐</text>
</svg>

字体样式

<svg width="400" height="200">
  <!-- 不同字体 -->
  <text x="20" y="30" font-size="20" font-family="Arial" fill="#1f2937">Arial 字体</text>
  <text x="20" y="60" font-size="20" font-family="Georgia" fill="#1f2937">Georgia 字体</text>
  <text x="20" y="90" font-size="20" font-family="Courier New" fill="#1f2937">Courier 字体</text>
  
  <!-- 不同粗细 -->
  <text x="20" y="130" font-size="18" font-weight="100" fill="#3b82f6">Thin 100</text>
  <text x="120" y="130" font-size="18" font-weight="400" fill="#3b82f6">Normal 400</text>
  <text x="240" y="130" font-size="18" font-weight="700" fill="#3b82f6">Bold 700</text>
  
  <!-- 斜体 -->
  <text x="20" y="170" font-size="18" font-style="italic" fill="#8b5cf6">斜体文本 Italic</text>
</svg>

文本描边

<svg width="400" height="100">
  <!-- 只有描边 -->
  <text x="20" y="45" font-size="40" font-weight="bold" 
        fill="none" stroke="#3b82f6" stroke-width="2">
    描边文字
  </text>
  
  <!-- 填充 + 描边 -->
  <text x="220" y="45" font-size="40" font-weight="bold" 
        fill="#bfdbfe" stroke="#3b82f6" stroke-width="1">
    双色文字
  </text>
</svg>

多行文本

SVG 不直接支持换行，需要使用多个 <tspan> 元素：

<svg width="300" height="120">
  <text x="20" y="30" font-size="18" fill="#1f2937">
    <tspan x="20" dy="0">第一行文本</tspan>
    <tspan x="20" dy="30">第二行文本</tspan>
    <tspan x="20" dy="30">第三行文本</tspan>
  </text>
</svg>

tspan 元素

<tspan> 用于设置文本的局部样式：

<svg width="400" height="60">
  <text x="20" y="40" font-size="24" fill="#1f2937">
    这是
    <tspan fill="#3b82f6" font-weight="bold">蓝色粗体</tspan>
    和
    <tspan fill="#ef4444" font-size="30">红色大字</tspan>
    文本
  </text>
</svg>

文本路径

让文本沿着路径排列：

<svg width="400" height="150">
  <defs>
    <path id="textPath1" d="M20,100 Q200,20 380,100"/>
  </defs>
  
  <!-- 显示路径 -->
  <path d="M20,100 Q200,20 380,100" fill="none" stroke="#e5e7eb" stroke-width="2"/>
  
  <!-- 文本沿路径 -->
  <text font-size="18" fill="#3b82f6">
    <textPath href="#textPath1">
      这是沿着曲线路径排列的文本内容
    </textPath>
  </text>
</svg>

圆形路径文本

<svg width="200" height="200">
  <defs>
    <path id="circlePath" d="M100,30 A70,70 0 1,1 99.9,30"/>
  </defs>
  
  <circle cx="100" cy="100" r="70" fill="none" stroke="#e5e7eb"/>
  
  <text font-size="14" fill="#3b82f6">
    <textPath href="#circlePath">
      这是沿着圆形路径排列的文本 • 环绕效果 •
    </textPath>
  </text>
</svg>

文本装饰

<svg width="400" height="120">
  <text x="20" y="30" font-size="20" fill="#1f2937" text-decoration="underline">
    下划线文本
  </text>
  <text x="20" y="60" font-size="20" fill="#1f2937" text-decoration="overline">
    上划线文本
  </text>
  <text x="20" y="90" font-size="20" fill="#1f2937" text-decoration="line-through">
    删除线文本
  </text>
</svg>

文本间距

<svg width="400" height="100">
  <!-- 字母间距 -->
  <text x="20" y="35" font-size="18" fill="#3b82f6" letter-spacing="5">
    LETTER SPACING
  </text>
  
  <!-- 单词间距 -->
  <text x="20" y="70" font-size="18" fill="#22c55e" word-spacing="20">
    Word Spacing Text
  </text>
</svg>

使用 CSS 样式

<style>
  .fancy-text {
    font-size: 36px;
    font-weight: bold;
    fill: #3b82f6;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .fancy-text:hover {
    fill: #1d4ed8;
    font-size: 40px;
  }
</style>

<svg width="300" height="60">
  <text class="fancy-text" x="20" y="45">Hover Me</text>
</svg>

文本动画

<svg width="400" height="100">
  <!-- 颜色动画 -->
  <text x="20" y="50" font-size="32" font-weight="bold" fill="#3b82f6">
    彩色文字
    <animate attributeName="fill" 
             values="#3b82f6;#ef4444;#22c55e;#8b5cf6;#3b82f6" 
             dur="3s" repeatCount="indefinite"/>
  </text>
  
  <!-- 位置动画 -->
  <text x="250" y="50" font-size="24" fill="#f59e0b">
    跳动
    <animate attributeName="y" values="50;30;50" dur="0.5s" repeatCount="indefinite"/>
  </text>
</svg>

实际应用示例

Logo 文字

<svg width="200" height="60">
  <text x="10" y="45" font-size="40" font-weight="bold" font-family="Arial">
    <tspan fill="#3b82f6">Tech</tspan><tspan fill="#1f2937">Hub</tspan>
  </text>
</svg>

徽章

<svg width="120" height="40">
  <rect width="120" height="40" rx="20" fill="#3b82f6"/>
  <text x="60" y="26" text-anchor="middle" fill="white" font-size="14" font-weight="bold">
    NEW
  </text>
</svg>

价格标签

<svg width="150" height="80">
  <rect width="150" height="80" rx="8" fill="#fef3c7" stroke="#f59e0b"/>
  <text x="75" y="35" text-anchor="middle" fill="#92400e" font-size="14">特价</text>
  <text x="75" y="60" text-anchor="middle" fill="#b45309" font-size="28" font-weight="bold">
    ¥99
  </text>
</svg>

圆形头像带文字

<svg width="100" height="100">
  <circle cx="50" cy="50" r="45" fill="#3b82f6"/>
  <text x="50" y="58" text-anchor="middle" fill="white" font-size="32" font-weight="bold">
    AB
  </text>
</svg>

标题装饰

<svg width="300" height="60">
  <!-- 左装饰线 -->
  <line x1="10" y1="30" x2="60" y2="30" stroke="#e5e7eb" stroke-width="2"/>
  <!-- 文字 -->
  <text x="150" y="38" text-anchor="middle" font-size="20" fill="#1f2937" font-weight="bold">
    标题文字
  </text>
  <!-- 右装饰线 -->
  <line x1="240" y1="30" x2="290" y2="30" stroke="#e5e7eb" stroke-width="2"/>
</svg>

下一步

学会了文本，接下来让我们学习 SVG stroke 属性 来美化图形描边！