SVG 文本有哪些特性和使用方法 - 面试题

SVG 文本功能强大，可以创建各种文本效果和排版。以下是 SVG 文本的主要特性和使用方法：

1. 基本文本元素 使用 <text> 元素创建文本。

svg
<svg width="300" height="200">
  <text x="50" y="50" font-size="24" font-family="Arial" fill="black">
    Hello SVG!
  </text>
  
  <text x="50" y="100" font-size="18" font-weight="bold" fill="blue">
    Bold Text
  </text>
  
  <text x="50" y="150" font-size="16" font-style="italic" fill="red">
    Italic Text
  </text>
</svg>

2. 文本对齐 使用 text-anchor 属性控制文本对齐。

svg
<svg width="300" height="200">
  <line x1="150" y1="20" x2="150" y2="180" stroke="gray" stroke-dasharray="5,5" />
  
  <text x="150" y="50" text-anchor="start" font-size="16">
    Start aligned
  </text>
  
  <text x="150" y="100" text-anchor="middle" font-size="16">
    Middle aligned
  </text>
  
  <text x="150" y="150" text-anchor="end" font-size="16">
    End aligned
  </text>
</svg>

3. 多行文本 使用 <tspan> 元素创建多行文本。

svg
<svg width="300" height="200">
  <text x="50" y="50" font-size="16">
    <tspan x="50" dy="0">First line</tspan>
    <tspan x="50" dy="25">Second line</tspan>
    <tspan x="50" dy="25">Third line</tspan>
  </text>
</svg>

4. 文本路径 让文本沿着路径显示。

svg
<svg width="300" height="200">
  <defs>
    <path id="textPath" d="M 50,100 Q 150,50 250,100" fill="none" stroke="gray" />
  </defs>
  
  <text font-size="20" fill="blue">
    <textPath href="#textPath">
      Text along a curved path
    </textPath>
  </text>
</svg>

5. 文本样式属性 常用的文本样式属性。

svg
<svg width="300" height="300">
  <text x="50" y="40" font-size="24" font-family="Arial" fill="black">
    Font Size 24
  </text>
  
  <text x="50" y="80" font-size="18" font-weight="bold" fill="blue">
    Bold Text
  </text>
  
  <text x="50" y="120" font-size="16" font-style="italic" fill="red">
    Italic Text
  </text>
  
  <text x="50" y="160" font-size="20" text-decoration="underline" fill="green">
    Underlined Text
  </text>
  
  <text x="50" y="200" font-size="20" letter-spacing="5" fill="purple">
    Spaced Out
  </text>
  
  <text x="50" y="240" font-size="20" word-spacing="10" fill="orange">
    Word Spacing
  </text>
</svg>

6. 文本变换 使用 transform 属性变换文本。

svg
<svg width="300" height="300">
  <text x="150" y="50" font-size="20" text-anchor="middle" fill="blue">
    Normal Text
  </text>
  
  <text x="150" y="100" font-size="20" text-anchor="middle" 
        transform="rotate(-10, 150, 100)" fill="red">
    Rotated Text
  </text>
  
  <text x="150" y="150" font-size="20" text-anchor="middle" 
        transform="scale(1.5, 1)" fill="green">
    Scaled Text
  </text>
  
  <text x="150" y="200" font-size="20" text-anchor="middle" 
        transform="skewX(-10)" fill="purple">
    Skewed Text
  </text>
</svg>

7. 文本描边 为文本添加描边效果。

svg
<svg width="300" height="200">
  <text x="50" y="80" font-size="48" font-weight="bold" 
        fill="none" stroke="blue" stroke-width="2">
    Outlined Text
  </text>
  
  <text x="50" y="150" font-size="48" font-weight="bold" 
        fill="yellow" stroke="red" stroke-width="3">
    Filled and Outlined
  </text>
</svg>

8. 文本渐变 使用渐变填充文本。

svg
<svg width="300" height="200">
  <defs>
    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff6b6b" />
      <stop offset="50%" stop-color="#4ecdc4" />
      <stop offset="100%" stop-color="#45b7d1" />
    </linearGradient>
  </defs>
  
  <text x="50" y="100" font-size="48" font-weight="bold" 
        fill="url(#textGradient)">
    Gradient Text
  </text>
</svg>

9. 文本阴影 使用滤镜为文本添加阴影。

svg
<svg width="300" height="200">
  <defs>
    <filter id="textShadow">
      <feDropShadow dx="3" dy="3" stdDeviation="2" 
                    flood-color="#000" flood-opacity="0.5" />
    </filter>
  </defs>
  
  <text x="50" y="100" font-size="48" font-weight="bold" 
        fill="blue" filter="url(#textShadow)">
    Shadow Text
  </text>
</svg>

10. 垂直文本 使用 writing-mode 属性创建垂直文本。

svg
<svg width="300" height="300">
  <text x="50" y="50" font-size="20" writing-mode="tb" fill="black">
    垂直文本
  </text>
  
  <text x="150" y="50" font-size="20" writing-mode="tb" fill="blue">
    Vertical Text
  </text>
</svg>

最佳实践：

使用适当的字体大小和行高
考虑文本的可读性和对比度
使用 text-anchor 实现精确对齐
合理使用文本路径创建创意效果
为文本添加适当的可访问性支持
测试跨浏览器兼容性
考虑使用 Web 字体提升视觉效果