SVG 文本学习笔记

SVG 是一种基于XML语言的矢量图形格式，它可以用来创建各种复杂的图形和动画效果，其中文本也是SVG中比较常用的元素之一。下面是关于SVG文本的一些基础知识和实例。

基础知识

插入文本元素

在SVG中，要插入文本元素只需要使用 <text> 标签，并在标签内编写要显示的文本即可。举个例子，以下代码可以在SVG画布上显示“Hello World!”这个文本：

htmlCopy Code
<svg>
  <text x="50" y="50">Hello World!</text>
</svg>

在上述代码中， x 和 y 属性表示文本的位置，可以根据需要进行调整。

文本属性

在SVG中，文本有很多可用的属性，包括字体、大小、颜色等等。以下是一些常见的属性及其用法：

font-family：设置文本所使用的字体名称；
font-size：设置文本的字号大小；
fill：设置文本的填充颜色；
stroke：设置文本的描边颜色；
stroke-width：设置文本的描边宽度。

例如，以下代码可以让“Hello World!”文本显示为蓝色字体，黑色描边，字号为30px，字体为Arial：

htmlCopy Code
<svg>
  <text x="50" y="50"
        font-family="Arial"
        font-size="30"
        fill="blue"
        stroke="black"
        stroke-width="1">Hello World!</text>
</svg>

文本位置和对齐

在SVG中，文本元素的位置和对齐可以通过 text-anchor 和 alignment-baseline 属性来设置。

text-anchor：设置文本的水平对齐方式，取值范围包括 start（左对齐）、middle（居中对齐）和 end（右对齐）；
alignment-baseline：设置文本的垂直对齐方式，取值范围包括 baseline（基线对齐）、middle（居中对齐）和 text-top（文本顶部对齐）等等。

例如，以下代码可以让“Hello World!”文本以左对齐、垂直居中的形式显示：

htmlCopy Code
<svg>
  <text x="50" y="50"
        text-anchor="start"
        alignment-baseline="middle">Hello World!</text>
</svg>

实例

下面是一些实例，展示了如何使用SVG创建不同样式的文本效果。

文字路径

在SVG中，我们可以将文本放置在指定的路径上，从而创建出非常炫酷的文本效果。以下是一个简单的例子，文字将沿着一个圆形路径展示：

htmlCopy Code
<svg>
  <path id="circle" d="M 50, 50 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0" fill="none" stroke="gray"/>
  <text>
    <textPath href="#circle">Hello World!</textPath>
  </text>
</svg>

在上述代码中，我们使用了 <path> 标签创建了一个圆形路径，并将其 id 设置为 circle，然后我们使用了 <textPath> 标签来将文本放置在这个路径上。

文字阴影

在SVG中，还可以通过 filter 属性给文本元素添加阴影效果。以下是一个简单的例子，展示了如何给“Hello World!”文本添加阴影效果：

htmlCopy Code
<svg>
  <defs>
    <filter id="shadow">
      <feDropShadow dx="4" dy="4" stdDeviation="2"/>
    </filter>
  </defs>

  <text x="50" y="50"
        font-size="30"
        filter="url(#shadow)">Hello World!</text>
</svg>

在上述代码中，我们首先使用 <defs> 标签定义了一个 id 为 shadow 的滤镜，然后在文本元素中使用了 filter 属性将这个滤镜应用到了文本上。

文字动画

最后，我们还可以使用SVG来创建非常酷炫的文字动画效果。以下是一个简单的例子，展示了如何使“Hello World!”文本逐字显示：

htmlCopy Code
<svg>
  <text x="50" y="50"
        font-size="30">
    <animate attributeName="opacity"
             values="0;1"
             keyTimes="0;1"
             dur="1s"
             begin="0s"
             repeatCount="indefinite"/>
    Hello
    <animate attributeName="opacity"
             values="0;1"
             keyTimes="0;1"
             dur="1s"
             begin="1s"
             repeatCount="indefinite"/>
    World
    <animate attributeName="opacity"
             values="0;1"
             keyTimes="0;1"
             dur="1s"
             begin="2s"
             repeatCount="indefinite"/>
    !
  </text>
</svg>

在上述代码中，我们使用了 <animate> 标签来为文本中的每一个字设置逐字显示的动画效果，从而营造出了非常炫酷的文本效果。