SVG-具有CSS效果的文本

SVG是“可缩放矢量图形”（Scalable Vector Graphics）的缩写，是一种基于XML的矢量图形标准。SVG允许开发者在网页中使用基于矢量的图形，并允许对它们进行动画处理和脚本控制。另外，在SVG中可以为每个图形元素添加CSS样式来实现更多的效果。

如何在SVG中添加CSS样式

SVG中的图形元素可以使用CSS进行样式修饰，也可以为整个SVG文档指定样式，方法如下：

内部样式表

在SVG文档的<style>标签中可以添加CSS样式，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style type="text/css">
      <![CDATA[
      text {
        fill: red;
        font-size: 20px;
        font-weight: bold;
      }
      ]]>
    </style>
  </defs>
  <text x="50" y="50">Hello World!</text>
</svg>

上面的代码中，<style>标签被放置于<defs>标签中，是一个内部样式表。在样式表中，我们为所有的text元素指定了填充颜色、字体大小和字体粗细。

外部样式表

与HTML类似，我们可以使用外部CSS文件来定义SVG的样式，如下所示：

/* style.css */
text {
  fill: red;
  font-size: 20px;
  font-weight: bold;
}

<!-- index.svg -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <link rel="stylesheet" type="text/css" href="style.css" />
  <text x="50" y="50">Hello World!</text>
</svg>

上面的代码中，我们先定义了一个名为style.css的CSS文件，并指定了text元素的样式，在SVG文档中使用<link>标签引入该CSS文件即可。

常用的CSS样式

除了上面提到的fill、font-size和font-weight属性外，还有很多其他的CSS样式可以用于SVG。下面列举一些常用的CSS样式。

• stroke：指定边框颜色
• stroke-width：指定边框宽度
• stroke-dasharray：指定虚线边框
• text-anchor：指定文本的水平对齐方式
• dominant-baseline：指定文本的垂直对齐方式
• transform：指定元素的变换方式，包括旋转、缩放、移动等

示例代码

下面是一个示例代码，演示了如何使用CSS样式对SVG文本进行美化：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <style type="text/css">
      <![CDATA[
      text {
        fill: #4CAF50;
        font-size: 60px;
        font-weight: bold;
        stroke: #000000;
        stroke-width: 3px;
        stroke-dasharray: 5px;
      }
      ]]>
    </style>
  </defs>
  <text x="100" y="100" text-anchor="middle" dominant-baseline="middle" transform="rotate(-30)">SVG Text</text>
</svg>

上面的代码演示了如何为SVG文本添加填充颜色、边框颜色、边框宽度和虚线边框。另外，我们还为文本添加了水平居中和垂直居中的样式，并将文本旋转了30度。您可以通过此链接查看示例效果。