SVG 文字效果

SVG 是一种用于描述二维矢量图形的 XML 语言。它可以实现丰富的文字效果，包括：填充色、描边色、阴影、渐变、路径剪切等效果。在本文中，我们将介绍如何使用 SVG 实现文字效果。

SVG 基本结构

SVG 支持三种方式添加文本：

• text 元素：用于添加普通文本
• tspan 元素： 用于添加有不同样式的子文本
• textPath 元素： 用于添加路径上分布的文本

下面是一个基本的 SVG 结构：

<svg width="500" height="500">
  <text x="50" y="50" font-size="36" fill="#ff0000">Hello SVG</text>
</svg>

填充色效果

使用 fill 属性可以指定文本填充色。例如：

<svg width="500" height="500">
  <text x="50" y="50" font-size="36" fill="#ff0000">Hello SVG</text>
</svg>

描边效果

使用 stroke 和 stroke-width 属性可以指定文本描边色和宽度。例如：

<svg width="500" height="500">
  <text x="50" y="50" font-size="36" fill="#ff0000" stroke="#000" stroke-width="2">Hello SVG</text>
</svg>

阴影效果

使用 filter 属性可以为文本添加阴影效果。例如：

<svg width="500" height="500">
  <filter id="shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
    <feOffset dx="2" dy="2"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <text x="50" y="50" font-size="36" fill="#ff0000" filter="url(#shadow)">Hello SVG</text>
</svg>

渐变效果

使用 gradient 可以为文本添加渐变效果。例如：

<svg width="500" height="500">
  <defs>
    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
    </linearGradient>
  </defs>
  <text x="50" y="50" font-size="36" fill="url(#grad)">Hello SVG</text>
</svg>

路径剪切效果

使用 clip-path 可以为文本添加路径剪切效果。例如：

<svg width="500" height="500">
  <defs>
    <clipPath id="clip">
      <rect x="0" y="0" width="200" height="50" />
    </clipPath>
  </defs>
  <text x="50" y="50" font-size="36" fill="#ff0000" clip-path="url(#clip)">Hello SVG</text>
</svg>

总结

以上是几种比较常用的 SVG 文字效果的实现方式，开发者可以根据需求在不同的地方使用不同的效果来美化页面。

参考链接：

• MDN Web 文档：SVG 教程
• W3Schools：SVG 文本