轻松学SVG：从基础到高效应用的完整指南

码手Lion • 2024年11月26日 am11:26 • 前端开发 • 127 阅读

一、引言

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的标记语言，用于描述二维图形。与传统的位图图像不同，SVG 图像是矢量图，具有分辨率独立性，这意味着它们在不同的屏幕尺寸和分辨率下都能保持清晰和平滑。由于其灵活性和可扩展性，SVG 已成为网页设计、图标设计以及数据可视化等领域的重要工具。

二、SVG 基础

1、SVG 标签结构

一个基本的 SVG 文档通常包含在一个 <svg> 标签中。<svg> 标签定义了一个绘图区域，其中可以包含各种图形元素。SVG 文档的结构通常类似于：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- 图形元素将在这里定义 -->
</svg>

width 和 height：设置绘图区域的宽度和高度，可以使用绝对单位（如 px）或相对单位（如 %）。
viewBox：定义了 SVG 的坐标系统，帮助调整图形内容的显示区域，常用于响应式设计，格式为 min-x min-y width height。
xmlns：这是 XML 命名空间，标明该文件采用 SVG 规范，值为 "http://www.w3.org/2000/svg"。

2、常用属性

SVG 提供了丰富的属性来控制图形的外观。以下是一些常用的属性，特别是与 stroke 相关的属性，以及其他常用的属性：

Stroke 属性

stroke：定义线条的颜色。可以使用颜色名称、RGB 值、十六进制颜色代码等格式。

<line x1="10" y1="10" x2="90" y2="90" stroke="black" />

stroke-width：定义线条的宽度，单位通常是像素（px）。

<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />

stroke-linecap：定义线条末端的形状。有三个可选值：
- butt：默认值，线条末端是平的。
- round：线条末端是圆的，形成圆润的效果。
- square：线条末端是方的，超出线条长度的一半。

<line x1="10" y1="10" x2="90" y2="10" stroke="black" stroke-width="10" stroke-linecap="butt" />
<line x1="10" y1="30" x2="90" y2="30" stroke="black" stroke-width="10" stroke-linecap="round" />
<line x1="10" y1="50" x2="90" y2="50" stroke="black" stroke-width="10" stroke-linecap="square" />

stroke-dasharray：定义虚线的模式。通过指定一系列的数值，表示实线和空白的长度，间隔可以不同。

<line x1="10" y1="10" x2="90" y2="10" stroke="black" stroke-width="2" stroke-dasharray="5,10" />

stroke-dashoffset：定义虚线的偏移量。可以调整虚线起始的位置，产生不同的视觉效果。

<line x1="10" y1="10" x2="90" y2="10" stroke="black" stroke-width="2" stroke-dasharray="5,10" stroke-dashoffset="2" />

stroke-linejoin：定义线条连接处的形状。有三个可选值：
- miter：默认值，线条连接处为尖角。
- round：线条连接处为圆角。
- bevel：线条连接处为斜角。

<path d="M10 10 L90 10 L50 90 Z" stroke="black" stroke-width="10" stroke-linejoin="miter" />
<path d="M10 110 L90 110 L50 190 Z" stroke="black" stroke-width="10" stroke-linejoin="round" />
<path d="M10 210 L90 210 L50 290 Z" stroke="black" stroke-width="10" stroke-linejoin="bevel" />

stroke-miterlimit：定义尖角的最大长度。当两条线的夹角很小时，尖角可能会变得非常长，stroke-miterlimit 可以限制其最大长度。

<path d="M10 10 L90 10 L50 90 Z" stroke="black" stroke-width="10" stroke-linejoin="miter" stroke-miterlimit="10" />

stroke-opacity：定义线条的透明度，取值范围为 0（完全透明）到 1（完全不透明）。

<line x1="10" y1="10" x2="90" y2="10" stroke="black" stroke-width="2" stroke-opacity="0.5" />

Fill 属性

fill：定义图形的填充颜色。与 stroke 属性类似，可以使用颜色名称、RGB 值、十六进制颜色代码等格式。

<rect x="10" y="10" width="50" height="50" fill="blue" />

fill-opacity：定义填充颜色的透明度，取值范围为 0（完全透明）到 1（完全不透明）。

<rect x="10" y="10" width="50" height="50" fill="blue" fill-opacity="0.5" />

其他常用属性

opacity：定义整个图形的透明度，影响所有属性（包括填充和边框）。取值范围为 0（完全透明）到 1（完全不透明）。

<rect x="10" y="10" width="50" height="50" fill="blue" opacity="0.5" />

transform：定义图形的变换，例如平移、旋转、缩放、倾斜等。常用的变换有：
- translate(x, y)：平移，x 和 y 分别是水平和垂直方向的位移。
- rotate(angle)：旋转，angle 是旋转角度。
- scale(x, y)：缩放，x 和 y 是水平和垂直方向的缩放因子。
- skewX(angle) 和 skewY(angle)：分别表示水平方向和垂直方向的倾斜角度。

<rect x="10" y="10" width="50" height="50" fill="blue" transform="translate(50, 50) rotate(45)" />
<circle cx="50" cy="50" r="40" fill="red" transform="scale(1.5, 1.5)" />

visibility：定义图形的可见性。与 display 不同，visibility 设置为 hidden 时，图形依然占据空间但不可见，而 display 设置为 none 时，图形完全不占空间。
- visible：默认值，图形可见。
- hidden：图形不可见。

<rect x="10" y="10" width="50" height="50" fill="blue" visibility="hidden" />

clip-path：定义图形的裁剪路径，允许通过指定的路径裁剪图形。

<rect x="10" y="10" width="100" height="100" fill="blue" clip-path="circle(50% at 50% 50%)" />

三、基本图形元素

1、矩形 `<rect>`

<rect> 标签用于绘制矩形，是 SVG 中最基础的图形元素之一，常用于创建背景、按钮、框架等矩形形状。

语法：

<rect
  x="x-coordinate"             <!-- 矩形左上角的 x 坐标 -->
  y="y-coordinate"             <!-- 矩形左上角的 y 坐标 -->
  width="width-value"          <!-- 矩形的宽度 -->
  height="height-value"        <!-- 矩形的高度 -->
  rx="rx-value"                <!-- 圆角矩形的圆角半径（水平方向） -->
  ry="ry-value"                <!-- 圆角矩形的圆角半径（垂直方向） -->
  fill="fill-color"            <!-- 矩形的填充颜色 -->
  stroke="stroke-color"        <!-- 矩形的描边颜色 -->
  stroke-width="width-value"   <!-- 矩形的描边宽度 -->
/>

x 和 y：定义矩形左上角的坐标位置，决定矩形在画布上的起始点。
width 和 height：分别设置矩形的宽度和高度，决定矩形的尺寸。
rx 和 ry：用于设置矩形的圆角。rx 规定水平方向的圆角半径，ry 规定垂直方向的圆角半径。若只设置 rx，矩形的四个角都会有相同的圆角半径；若同时设置 rx 和 ry，则可以分别指定不同的圆角半径。
fill：指定矩形的填充颜色，可以使用颜色名称、十六进制值、RGB 值等。
stroke：定义矩形的边框颜色。
stroke-width：控制矩形边框的宽度，通常以像素为单位。

实例：

<rect x="10" y="10" width="100" height="50" fill="green" stroke="black" stroke-width="2" rx="10" ry="10" />

这个例子创建了一个宽 100 像素、高 50 像素的矩形，左上角位置在 (10, 10)，填充颜色为绿色，边框颜色为黑色，边框宽度为 2 像素，且具有圆角效果，圆角半径分别为 10 像素。

x 和 y：指定矩形的左上角在画布上的位置。
width 和 height：定义矩形的尺寸。
rx 和 ry：设置矩形的圆角效果，如果需要圆角矩形，两个值都可以定义。
fill：矩形的填充颜色。
stroke 和 stroke-width：为矩形添加边框颜色和宽度。

通过调整这些属性，可以创建各种不同风格的矩形，包括有圆角的矩形和带有边框的矩形。

2、圆形 `<circle>`

<circle> 标签用于绘制圆形，广泛应用于图标设计、按钮、指示器等场景，能够创建简单且对称的图形。

语法：

<circle
  cx="x-coordinate"      <!-- 圆心的 x 坐标 -->
  cy="y-coordinate"      <!-- 圆心的 y 坐标 -->
  r="radius"             <!-- 圆的半径 -->
  fill="fill-color"      <!-- 圆的填充颜色 -->
  stroke="stroke-color"  <!-- 圆的描边颜色 -->
  stroke-width="width"   <!-- 圆的描边宽度 -->
/>

cx 和 cy：这两个属性指定圆心的位置，即圆的中心点在 SVG 画布上的坐标。
r：定义圆的半径，控制圆的大小。
fill：设置圆的填充颜色，可以使用颜色名称、十六进制值或 RGB 等格式。
stroke：指定圆的边框颜色。
stroke-width：设置圆边框的宽度。

实例：

<circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="2" />

这个例子创建了一个圆形，圆心坐标为 (50, 50)，半径为 40 像素，填充颜色为蓝色，边框颜色为黑色，边框宽度为 2 像素。

cx 和 cy：确定圆的中心位置。
r：设置圆的大小（半径）。
fill：定义圆的填充颜色。
stroke 和 stroke-width：控制圆的边框颜色和宽度。

通过这些属性，你可以轻松绘制各种大小、颜色和边框样式的圆形。

3、椭圆 `<ellipse>`

<ellipse> 标签用于绘制椭圆形状，椭圆是由两个不同长度的轴组成，常用于表现对称、非圆形的图形元素。

语法：

<ellipse
  cx="x-coordinate"      <!-- 椭圆中心点的 x 坐标 -->
  cy="y-coordinate"      <!-- 椭圆中心点的 y 坐标 -->
  rx="x-radius"          <!-- 椭圆水平轴的半径 -->
  ry="y-radius"          <!-- 椭圆垂直轴的半径 -->
  fill="fill-color"      <!-- 椭圆的填充颜色 -->
  stroke="stroke-color"  <!-- 椭圆的描边颜色 -->
  stroke-width="width"   <!-- 椭圆的描边宽度 -->
/>

cx 和 cy：指定椭圆的中心点坐标，即椭圆的中心位置。
rx：定义椭圆水平方向的半径，即椭圆水平轴的长度。
ry：定义椭圆垂直方向的半径，即椭圆垂直轴的长度。
fill：设置椭圆的填充颜色。
stroke：定义椭圆的边框颜色。
stroke-width：控制椭圆的边框宽度。

实例：

<ellipse cx="60" cy="60" rx="50" ry="30" fill="yellow" stroke="black" stroke-width="2" />

这个例子创建了一个椭圆，中心点位于 (60, 60)，水平方向的半径为 50 像素，垂直方向的半径为 30 像素，填充颜色为黄色，边框颜色为黑色，边框宽度为 2 像素。

cx 和 cy：确定椭圆的中心位置。
rx 和 ry：分别设置椭圆的水平和垂直半径，决定椭圆的形状。
fill：椭圆的填充颜色。
stroke 和 stroke-width：椭圆的边框颜色和宽度。

通过这几个简单的属性，你可以自由地绘制出不同大小、不同比例的椭圆形状。

4、线条 `<line>`

<line> 标签用于绘制简单的直线，通过指定起点和终点的坐标，可以控制直线的方向和长度。

语法：

<line
  x1="start-x"                <!-- 直线起点的 x 坐标 -->
  y1="start-y"                <!-- 直线起点的 y 坐标 -->
  x2="end-x"                  <!-- 直线终点的 x 坐标 -->
  y2="end-y"                  <!-- 直线终点的 y 坐标 -->
  stroke="line-color"         <!-- 直线的颜色 -->
  stroke-width="line-width"   <!-- 直线的宽度 -->
/>

x1 和 y1：这两个属性定义了直线的起点坐标。
x2 和 y2：这两个属性定义了直线的终点坐标。
stroke：设置直线的颜色，可以使用常见的颜色值，如 "red"、"#FF0000" 等。
stroke-width：定义直线的宽度，控制线条的粗细。

实例：

<line x1="20" y1="30" x2="150" y2="30" stroke="blue" stroke-width="4" />

这个例子创建了一条水平直线，起点为 (20, 30)，终点为 (150, 30)，线条颜色为蓝色，宽度为 4 像素。

x1 和 y1：定义起点坐标 (20, 30)。
x2 和 y2：定义终点坐标 (150, 30)。
stroke：设置线条的颜色为蓝色。
stroke-width：设置线条的宽度为 4 像素。

通过这些属性，你可以轻松绘制直线，适用于各种图形连接、边界划分或图表中的线条展示。

5、多边形 `<polygon>`

<polygon> 标签用于绘制任意多边形，通过指定一系列顶点的坐标来构成形状。它可以表示三角形、四边形等多种图形。

语法：

<polygon
  points="x1,y1 x2,y2 x3,y3 ..."   <!-- 多边形各个顶点的坐标 -->
  fill="fill-color"                <!-- 多边形的填充颜色 -->
  stroke="stroke-color"            <!-- 多边形的边框颜色 -->
  stroke-width="border-width"      <!-- 多边形的边框宽度 -->
/>

points：该属性用于定义多边形的各个顶点坐标。每个顶点的坐标用空格分隔，并且每个坐标由 x 和 y 值组成，两个数值之间使用逗号分隔。
fill：设置多边形的填充颜色。
stroke：设置多边形的边框颜色。
stroke-width：定义多边形边框的宽度。

实例：

<polygon points="50,15 60,45 40,45" fill="green" stroke="black" stroke-width="2" />

这个例子绘制了一个三角形，三个顶点的坐标分别是 (50, 15)，(60, 45) 和 (40, 45)。填充颜色为绿色，边框颜色为黑色，边框宽度为 2 像素。

points：定义了三角形的三个顶点坐标 (50,15)，(60,45)，(40,45)。
fill：设置三角形的填充颜色为绿色。
stroke：设置边框颜色为黑色。
stroke-width：边框的宽度为 2 像素。

使用 <polygon> 标签，可以绘制任何复杂的多边形，只需通过调整顶点坐标来定义所需的形状。

6、折线 `<polyline>`

`<polyline> 标签用于绘制由多个直线段连接而成的折线。与 <polygon> 标签相似，<polyline> 通过一系列的顶点坐标定义路径，但它不会自动闭合路径，因此适用于绘制开放的线段。

语法：

<polyline
  points="x1,y1 x2,y2 x3,y3 ..."   <!-- 折线各个连接点的坐标 -->
  fill="none"                      <!-- 折线的填充颜色，通常设置为 "none" 不填充 -->
  stroke="stroke-color"            <!-- 折线的线条颜色 -->
  stroke-width="width"             <!-- 折线的线条宽度 -->
/>

points：此属性包含多个顶点坐标，表示折线的各个连接点。每对坐标用逗号分隔，多个坐标对之间使用空格分隔。
fill：用于设置填充颜色。由于折线通常不需要填充，因此该属性通常设置为 "none"。
stroke：定义折线的颜色。
stroke-width：定义折线的宽度。

实例：

<polyline points="10,10 50,50 90,10" fill="none" stroke="black" stroke-width="2" />

在这个例子中，折线由三个顶点组成，分别为 (10,10)，(50,50)，(90,10)。折线没有填充颜色，线条颜色为黑色，宽度为 2 像素。

points：通过三个坐标点 (10,10)，(50,50) 和 (90,10) 定义了折线的路径。
fill：设置为 "none"，因为折线本身没有填充。
stroke：设置折线的颜色为黑色。
stroke-width：设置线条宽度为 2。

使用 <polyline> 标签，可以灵活地绘制任何形状的折线图，适合展示动态变化的路径或由多个线段连接起来的图形。

7、路径 `<path>`

<path> 标签是 SVG 中最为灵活和强大的元素之一，能够绘制任何复杂的图形。通过一系列路径命令，用户可以定义任意形状，包括直线、曲线、圆弧等。它常用于需要动态调整的图形，如自定义图标、复杂的图形或动画路径。

语法：

<path
  d="path-data"            <!-- 描述路径的指令序列 -->
  fill="fill-color"        <!-- 路径的填充颜色 -->
  stroke="stroke-color"    <!-- 路径的描边颜色 -->
  stroke-width="width"     <!-- 路径的描边宽度 -->
/>

d：路径数据，包含一系列指令，描述如何绘制路径。每个指令由一个字母和随后的参数组成，常见的指令包括：
- M（move to）：移动到指定位置。
- L（line to）：绘制直线到指定点。
- H（horizontal line to）：绘制水平直线。
- V（vertical line to）：绘制垂直直线。
- C（cubic Bezier curve）：绘制三次贝塞尔曲线。
- S（smooth cubic Bezier curve）：绘制平滑的三次贝塞尔曲线。
- Q（quadratic Bezier curve）：绘制二次贝塞尔曲线。
- T（smooth quadratic Bezier curve）：绘制平滑的二次贝塞尔曲线。
- A（arc to）：绘制圆弧。
- Z（close path）：闭合路径，返回到起点。

这些命令组合起来，可以绘制出各种复杂的形状。

fill：定义路径的填充颜色。如果路径是封闭的，这个属性决定了路径内部的颜色。
stroke：定义路径的边框颜色，用来设置路径的外边框颜色。
stroke-width：定义路径边框的宽度。

实例：

<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke="orange" stroke-width="2" />

在这个例子中，路径描述了一个矩形的边框：

M10 10：移动到坐标 (10, 10)，这是路径的起始点。
H 90：绘制水平线到 x = 90。
V 90：绘制垂直线到 y = 90。
H 10：绘制水平线回到 x = 10。
L 10 10：绘制一条直线回到起点 (10, 10)，闭合路径。
fill：设置为 none，因为该路径没有填充颜色。
stroke：路径边框的颜色为橙色。
stroke-width：边框的宽度为 2 个单位。

通过 <path> 标签，SVG 使得我们可以精确控制路径的每个细节，适用于绘制图标、复杂的形状、图表及其他需要精确描绘的图形。

四、文本

1、文本 `<text>`

SVG 中不仅可以绘制图形，还可以精确地添加文本，允许我们通过 <text> 标签来控制字体、大小、颜色等文本属性。通过该标签，可以在图形中轻松显示文本，适用于图表、图标以及标注等应用场景。

语法：

<text
  x="x-coordinate"          <!-- 文本起始点的 x 坐标 -->
  y="y-coordinate"          <!-- 文本起始点的 y 坐标 -->
  font-family="font"        <!-- 字体类型 -->
  font-size="size"          <!-- 字体大小 -->
  fill="fill-color"         <!-- 文本填充颜色 -->
  text-anchor="anchor"      <!-- 文本对齐方式 -->
>
  Text content              <!-- 文本内容 -->
</text>

x 和 y：设置文本的起始位置，分别是文本左上角的 x 和 y 坐标。
font-family：定义文本使用的字体，可以是系统字体或自定义字体。
font-size：定义文本的大小，通常以像素（px）为单位。
fill：设置文本的颜色，支持所有 CSS 色彩值。
text-anchor：控制文本的对齐方式。常用值包括：
- "start"：默认值，左对齐。
- "middle"：居中对齐。
- "end"：右对齐。

实例：

<text x="50" y="50" font-family="Arial" font-size="24" fill="black">Hello, SVG!</text>

x 和 y：指定文本的位置。
font-family：字体类型，例如 Arial。
font-size：文本大小为 24 像素。
fill：文本颜色为黑色。

路径上的文字：可以将文本沿着路径进行排列，使用 <textPath> 标签与 <path> 标签结合，创建路径上的文字效果。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <defs>
      <path id="pathId" d="M75,20 a1,1 0 0,0 100,0" />
   </defs>
   <text style="fill:#333;">
      <textPath xlink:href="#pathId">路径上的文字</textPath>
   </text>
</svg>

<path>：定义了一个路径，用于文字的排列。
<textPath>：将文本内容与路径绑定，使文字沿着路径曲线排列。

通过这种方式，可以在 SVG 中实现动态和个性化的文字效果，适用于制作有创意的图形、标志或图表中的标签。

五、高级特性

1、线性渐变 `<linearGradient>`

线性渐变 <linearGradient> 是一种常用的渐变效果，它通过在指定的方向上从一个颜色渐变到另一个颜色来填充图形。通过设置渐变的起始点和终止点，可以控制渐变的方向和颜色变化方式。

语法：

<linearGradient id="gradient_id" x1="x1-coordinate" y1="y1-coordinate" x2="x2-coordinate" y2="y2-coordinate">
  <stop offset="offset1" stop-color="color1" stop-opacity="opacity1" />
  <stop offset="offset2" stop-color="color2" stop-opacity="opacity2" />
  <!-- 更多的 <stop> 元素 -->
</linearGradient>

id：定义渐变的唯一标识符。这个标识符可以在 SVG 中其他地方引用，以应用渐变效果。
x1 和 y1：定义渐变的起始位置，分别表示渐变开始的 x 和 y 坐标。
x2 和 y2：定义渐变的结束位置，分别表示渐变结束的 x 和 y 坐标。
<stop>：用于定义渐变的颜色以及颜色出现的位置。每个 <stop> 元素都指定了一个颜色和该颜色的位置。
- offset：定义渐变色的位置，范围从 0% 到 100%，表示颜色从起点到终点的进度。
- stop-color：定义渐变的颜色。
- stop-opacity：定义渐变色的透明度（可选，默认值为 1，即完全不透明）。

实例：

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="yellow" stop-opacity="1" />
    <stop offset="100%" stop-color="red" stop-opacity="1" />
  </linearGradient>
</defs>

<rect x="10" y="10" width="150" height="150" fill="url(#grad1)" />

<linearGradient> 定义了一个从左到右的渐变效果。
x1="0%" y1="0%" 表示渐变的起始点在左上角（0%，0%）。
x2="100%" y2="0%" 表示渐变的终点在右上角（100%，0%）。
<stop offset="0%" stop-color="yellow" 定义了起始位置的颜色为黄色。
<stop offset="100%" stop-color="red" 定义了终点位置的颜色为红色。

这段代码将一个矩形元素的填充色设置为一个由黄色到红色的线性渐变效果。

2、径向渐变 `<radialGradient>`

径向渐变 <radialGradient> 允许创建从中心向外扩展的渐变效果，适用于模拟光照效果、阴影或圆形填充等效果。它与线性渐变的区别在于，径向渐变的颜色是从中心向四周辐射的。

语法：

<radialGradient id="gradient_id" cx="cx-coordinate" cy="cy-coordinate" r="radius" fx="fx-coordinate" fy="fy-coordinate">
  <stop offset="offset1" stop-color="color1" stop-opacity="opacity1" />
  <stop offset="offset2" stop-color="color2" stop-opacity="opacity2" />
  <!-- 更多的 <stop> 元素 -->
</radialGradient>

id：定义径向渐变的唯一标识符，可以在其他图形元素中引用这个渐变。
cx 和 cy：定义渐变的中心点坐标，默认值为 (50%, 50%)，即位于渐变区域的中心。
r：定义渐变的半径，控制渐变的扩展范围，默认为 50%。
fx 和 fy：定义渐变的焦点坐标，决定渐变效果的起始点。通过调整焦点的位置，可以改变渐变的形状和方向。默认情况下，这些值与 cx 和 cy 相同。
<stop> 元素定义了渐变中的颜色和其位置。
- offset：指定颜色的位置，从 0% 到 100% 表示从渐变的中心到边缘。
- stop-color：指定渐变的颜色。
- stop-opacity：定义颜色的透明度。

实例：

<defs>
  <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
  </radialGradient>
</defs>

<circle cx="75" cy="75" r="70" fill="url(#grad2)" />

cx="50%" cy="50%"：定义了渐变的中心点为圆形的中心。
r="50%"：设置渐变的半径为 50%，意味着渐变效果会从圆心开始，逐渐扩展到半径为 70 的圆形边缘。
<stop offset="0%" stop-color="yellow"：定义了渐变的起始颜色为黄色，完全不透明。
<stop offset="100%" stop-color="red"：定义了渐变的结束颜色为红色，完全不透明。

这段代码在一个圆形上应用了从黄色到红色的径向渐变效果，渐变的中心在圆形的中心，并从中心向外扩展。

3、滤镜 `<filter>`

滤镜 <filter> 是 SVG 中一种强大的图形处理工具，可以通过应用不同的效果（如模糊、阴影、色彩调整等）来修改图形元素的外观。常见的滤镜效果包括模糊、阴影、亮度对比度调整、颜色矩阵操作和混合模式等。

语法：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义滤镜 -->
  <filter id="filter_id">
    <!-- 滤镜效果 -->
  </filter>

  <!-- 目标元素 -->
  <rect x="50" y="50" width="100" height="80" filter="url(#filter_id)" />
</svg>

id：为滤镜定义唯一标识符，可以在其他元素中通过 filter="url(#filter_id)" 来引用。
filter：指定目标元素应用的滤镜效果。
滤镜效果：可以包含多个滤镜操作元素，常用的包括：
- <feGaussianBlur>：实现模糊效果。
- <feDropShadow>：实现阴影效果。
- <feComponentTransfer>：调整亮度、对比度等图像特性。
- <feColorMatrix>：改变图像的颜色。
- <feBlend>：混合多个图像。

实例：

模糊效果（Blur）：

模糊效果使图形看起来更加柔和。通过 <feGaussianBlur> 元素实现。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义模糊滤镜 -->
  <filter id="blurEffect">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <!-- 应用滤镜的矩形 -->
  <rect x="50" y="50" width="100" height="80" fill="red" filter="url(#blurEffect)" />
</svg>

<feGaussianBlur>：应用高斯模糊。
in="SourceGraphic"：指定图形的原始输入。
stdDeviation="5"：控制模糊的程度，数值越大，模糊越强。

阴影效果（Shadow）：

阴影效果使图形有类似阴影的效果。通过 <feDropShadow> 元素来实现。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义阴影滤镜 -->
  <filter id="shadowEffect">
    <feDropShadow dx="5" dy="5" stdDeviation="3" />
  </filter>

  <!-- 应用滤镜的矩形 -->
  <rect x="50" y="50" width="100" height="80" fill="red" filter="url(#shadowEffect)" />
</svg>

<feDropShadow>：为元素添加阴影效果。
dx 和 dy：定义阴影的水平和垂直偏移量。
stdDeviation：控制阴影的模糊程度。

六、动画

SVG 提供了多种方式来实现动画效果，可以为属性添加动画效果，增强图形的互动性。

1、基本动画 `<animate>`

SVG 提供了 <animate> 元素来实现基本的动画效果，可以通过改变元素的属性值来创建动态效果。常用的动画属性包括位置、颜色、大小等。动画可以是一次性播放，也可以无限循环。

语法：

<rect x="10" y="10" width="50" height="50" fill="blue">
  <animate attributeName="x" from="10" to="150" dur="2s" repeatCount="indefinite" />
</rect>

attributeName：指定要动画化的属性名称。常见的属性有 x、y、width、height、fill 等。
from 和 to：定义动画的起始值和结束值。from 是动画开始时的值，to 是动画结束时的值。
dur：动画的持续时间，格式为时间单位（如秒 s 或毫秒 ms）。例如，dur="2s" 表示动画持续 2 秒。
repeatCount：动画重复的次数。indefinite 表示动画将无限次循环播放；如果设置为一个数字（如 repeatCount="3"），动画将重复指定的次数。

实例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="50" height="50" fill="blue">
    <animate attributeName="x" from="10" to="150" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

attributeName="x"：动画会作用于矩形的 x 坐标。
from="10"：动画开始时，矩形的 x 坐标为 10。
to="150"：动画结束时，矩形的 x 坐标为 150。
dur="2s"：动画持续 2 秒钟。
repeatCount="indefinite"：动画会无限循环，直到停止。

通过 <animate> 元素，SVG 可以实现简单的平移动画、颜色渐变、旋转等效果，可以在不依赖外部 JavaScript 的情况下直接在 SVG 文件中完成动画效果。这使得 SVG 成为制作交互式和动态图形的一个有力工具。

2、变换动画 `<animateTransform>`

SVG 还提供了 <animateTransform> 元素，用于对图形元素的变换属性（如旋转、平移、缩放等）进行动画化。这个元素是实现图形变换动画的理想工具。

语法：

<circle cx="50" cy="50" r="30" fill="blue">
  <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite" />
</circle>

attributeName="transform"：定义动画作用于 transform 属性，即变换属性。
type：指定变换的类型。常用的变换类型有：
- rotate：旋转
- scale：缩放
- translate：平移
- skewX / skewY：倾斜
from 和 to：定义变换的起始和结束值。对于旋转，from 和 to 的值分别表示旋转的起始角度和结束角度。格式 from="0 50 50" 表示从 0° 旋转开始，绕着 cx="50" cy="50" 的点旋转；to="360 50 50" 表示旋转至 360°。
dur：指定动画持续的时间。单位为秒（s）或毫秒（ms）。
repeatCount：指定动画的重复次数。indefinite 表示动画会无限循环。

实例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" fill="blue">
    <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

attributeName="transform"：动画作用于变换属性。
type="rotate"：应用旋转变换。
from="0 50 50"：从 0° 角度开始，围绕圆心（50, 50）旋转。
to="360 50 50"：旋转至 360°，依然围绕圆心（50, 50）旋转。
dur="2s"：旋转动画持续 2 秒。
repeatCount="indefinite"：旋转动画无限循环。

<animateTransform> 允许在 SVG 中创建平滑的变换动画，例如旋转、缩放和移动等。通过变换动画，可以为图形元素添加动态效果，增强视觉表现力，同时无需使用 JavaScript，从而使得 SVG 动画更加简洁高效。

七、实用技巧

1、使用外部样式表

为了实现样式的复用，可以将样式表提取到外部文件，或者在 SVG 中使用 <style> 标签来编写 CSS。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <style>
        .myRect {
            fill: blue;
            stroke: black;
            stroke-width: 2;
        }
    </style>
    <rect x="10" y="10" width="50" height="50" class="myRect" />
</svg>

2、CSS 动画控制 SVG

除了使用 <animate> 和 <animateTransform> 直接在 SVG 内部做动画，还可以通过 CSS 来控制 SVG 动画。这种方式非常灵活，支持多种动画效果，且可以将动画与其他样式结合使用，增加图形的交互性和动态效果。

语法：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" fill="blue" class="anim-circle" />
</svg>

<style>
  .anim-circle {
    animation: move 2s infinite;
  }

  @keyframes move {
    0% {
      cx: 50;
      cy: 50;
    }
    100% {
      cx: 150;
      cy: 150;
    }
  }
</style>

animation：在 circle 元素上应用 CSS 动画，指定动画名称、持续时间和重复次数。
@keyframes：定义动画的关键帧，定义动画在不同时间点的状态。

属性解析：

@keyframes：关键帧用于定义动画在不同时间点的样式变化。move 动画将 circle 元素的 cx 和 cy 属性从初始值 50 变动到 150，实现平移效果。
animation：控制动画的基本参数：
- move 是动画的名称。
- 2s 是动画持续时间。
- infinite 表示动画无限循环。

实例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" fill="blue" class="anim-circle" />
</svg>

<style>
  .anim-circle {
    animation: translate 2s ease-in-out infinite;
  }

  @keyframes translate {
    0% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(100px, 100px);
    }
    100% {
      transform: translate(0, 0);
    }
  }
</style>

transform: translate(x, y)：将元素沿着 X 和 Y 轴进行平移。在 0% 处，圆形位于原始位置；在 50% 时，圆形平移到 (100px, 100px)；动画结束时恢复到原位。

使用 CSS 动画控制 SVG 可以简化代码，特别是在需要多个元素进行相同或类似动画时，CSS 提供了更优雅和灵活的解决方案。同时，CSS 动画能与页面的其他样式元素无缝结合，便于管理和维护。

这种方法适用于以下情况：

需要对多个 SVG 元素应用相同的动画效果。
在网页中对 SVG 进行复杂的交互式动画时，CSS 动画提供了更好的性能和控制力。

3、优化性能

减少元素数量：尽量合并相似的图形元素，减少页面渲染时的计算负担。
使用符号：通过 <symbol> 和 <use> 标签可以重用图形元素，避免重复定义相同图形。
避免过度使用动画：过多的动画可能会影响性能，尤其是在移动设备上，建议根据实际需要优化动画效果。

八、结语

SVG（可缩放矢量图形）作为一种图形格式，具有无损缩放和清晰呈现的优势，已经成为现代网页设计中不可或缺的一部分。本文通过介绍各种 SVG 图形元素、渐变、滤镜、动画等特性，帮助您全面了解如何在网页中使用 SVG 创建动态、交互式且美观的图形。

从基础的矩形、圆形、路径到更高级的渐变、滤镜和动画效果，SVG 提供了丰富的工具，让设计师和开发者能够创造出丰富多彩的视觉效果。特别是在响应式设计、图标制作和数据可视化等方面，SVG 更是展现出了无与伦比的优势。通过对这些功能的灵活运用，您可以提升网站的视觉吸引力和用户体验。

希望本文的内容能为您在实际项目中应用 SVG 提供启发与指导，不论是在静态图形的绘制，还是在动态交互、复杂动画的实现上，您都可以根据需求灵活选择合适的方法与技巧，让您的设计更具表现力和互动性。

版权声明：
作者：码手Lion
链接：https://www.mslion.net/103/
来源：码手Lion的博客
文章版权归作者所有，未经允许请勿转载。

THE END

svg

二维码

打造属于你的表单验证工具

< <上一篇

掌握创意之钥：全面解析HTML5 Canvas

下一篇>>

轻松学SVG：从基础到高效应用的完整指南

一、引言

二、SVG 基础

1、SVG 标签结构

2、常用属性

Stroke 属性

Fill 属性

其他常用属性

三、基本图形元素

1、矩形 <rect>

语法：

实例：

2、圆形 <circle>

语法：

实例：

3、椭圆 <ellipse>

语法：

实例：

4、线条 <line>

语法：

实例：

5、多边形 <polygon>

语法：

实例：

6、折线 <polyline>

语法：

实例：

7、路径 <path>

语法：

实例：