What are the features and usage methods of SVG text

SVG text features are powerful and can create various text effects and layouts. Here are the main features and usage methods of SVG text:

1. Basic Text Elements Use the <text> element to create 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 Alignment Use the text-anchor attribute to control text alignment.

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. Multi-line Text Use the <tspan> element to create multi-line text.

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. Text on Path Make text follow a path.

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. Text Style Attributes Common text style attributes.

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. Text Transformation Use the transform attribute to transform text.

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. Text Stroke Add stroke effects to text.

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. Text Gradient Use gradients to fill text.

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. Text Shadow Use filters to add shadows to text.

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. Vertical Text Use the writing-mode attribute to create vertical text.

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>

Best Practices:

• Use appropriate font sizes and line heights
• Consider text readability and contrast
• Use text-anchor for precise alignment
• Reasonably use text paths for creative effects
• Add appropriate accessibility support for text
• Test cross-browser compatibility
• Consider using web fonts to enhance visual effects