IT博客汇 | 用了那么久的 SVG，你还没有入门吗？

用了那么久的 SVG，你还没有入门吗？

熊的猫发表于 2023-03-30 12:01:11

前言

欢迎关注同名公众号《熊的猫》，后续文章会同步更新！

其实在大部分的项目中都有直接或间接使用到 SVG 和 Canvas，但是在大多数时候我们只是选择简单了解或直接跳过，这有问题吗？没有问题，毕竟砖还是要搬的！

话说回来，前端其实还是需要对 SVG 和 Canvas 进行学习的，因为其实你一直都在用，多了解不会让你有什么损失，最基本的可以避免：

不至于当 UI 扔给你一个不符合设计稿颜色的 SVG 时摸不着头脑
不至于无法通过 CSS 为 SVG 图自定义其色值时无从下手
甚至不知道为什么要在项目中将展示 SVG 的内容封装成组件
...

再往上些就可以基于 SVG 进行自定义编码，例如完成各种基于 SVG 的动画需求、在可视化大屏项目中的应用等等。

相关文章其实早就想写（~~在草稿箱里挺长时间了~~），但由于各种原因没有真正输出，本篇文章以 SVG 为主要内容正式开启探索之旅。

文中如有不正确之处，可在评论区斧正！！！

SVG 简介

是什么？

SVG 的全称是 Scalable Vector Graphics（即可缩放矢量图形），它基于 XML 标记语言，用于描述二维的 矢量图形。

同时 SVG 是一个基于文本的开放网络标准，其 图像内容 和 相关行为 会被定义于 XML 文本文件之中，并能够和 CSS、DOM、JavaScript 等网络标准进行衔接。

以上是 官方解释，那么再给一个 非官方解释：

人话就是说 SVG 是一种可缩放矢量图形，它可以用 类 HTML（即 XML） 来表示，也就是 可编码，因此你可以在 DOM 中直接使用，可以通过 CSS 控制样式，可以通过 JavaScript 动态修改。

具有什么优势？

其实通过上述的简介，你就不难看出 SVG 至少有以下两个优点（~~说多了记不住没意义~~）:

可缩放矢量图形
可编码性

可缩放矢量图形

点阵图/位图

通常我们经见的如 JPEG（后缀名为 .jpg 或 .jpeg）和 PNG 属于 点阵图/位图

也就是 由很多的像素组成的图形，平时看到的大多图片数属于点阵图，但由于像素非常高，每个点非常小，人的眼睛看不清那一个个的点，所以没有感知，但其实都是用点组成的，通常将它们一直放大，就看到区别了，如下：

原始尺寸图片
通过画图软件放大

从以上来看 点阵图/位图 缺点之一就是不适合进行无限放大，因为会导致原本人眼不可见的像素被放大，导致视觉上看起来图片 模糊/失真。

但是也正是因为 点阵图/位图 由不同的像素块组成的，因此可以给不同的像素块填充不同颜色，使得整个图形色彩可以非常丰富。

矢量图形

而 矢量图形 是用数学向量、根据几何特性来绘制图形，矢量可以是一个点或一条线，它是通过 多个对象的组合生成 的，对其中的每一个对象的记录方式，都是以数学函数来实现的。

并且每个对象都是一个 互相独立的实体，意味着多次移动和改变它的属性时不会影响图例中的其它对象，仍可以在维持它原有清晰度和弯曲度，也就是说它们可以按 最高分辨率 显示到 输出设备 上。

因此，矢量图形的优点如下：

文件占用内在空间较小
- 矢量图实际上保存的是 点、线、矩形 等元素的信息，我们能够看到图像是因为在我们打开矢量图时，由计算机根据这些信息计算出来的，而 点阵图/位图 则是保存各个点的图像信息
放大后不失真（不会变模糊）
- 因为它和分辨率无关，无论我们移动或改变它的属性多少次，它都可以在维持它原有清晰度和弯曲度

可编码性

可编码性应该不难理解，完全可以通过下面这个图来解释（一图胜千言）：

SVG 的可编码性使得它相对于 点阵图/位图 具备更强的灵活性，只要按照其对应的规则去修改点、线等相关信息，我们就可以改变图形，而不像 点阵图/位图 意义比如只是想要不同颜色的同一张图片用于切换时，还得单独准备两张图片等等。

SVG 的使用场景

icon 图标

在项目中某些图标也会使用 SVG 的格式，最常见的例如在 iconfont 上可自行选择是否以 SVG 的方式使用：

而在项目中使用 SVG 文件时，通常需要对应的 loader 处理，例如 vite 中的 vite-svg-loader、webpakc 中的 svg-sprite-loader 等，还会封装成组件的形式去使用，实际上就是通过 <svg>、<symbol>、<use> 根据 name 作为标识实现引用，这里就不再展开。

平面图绘制

在项目中需要进行平面图绘制，如需要绘制 线、多边形、图片 等等，比如需要实现前端引导页功能，其中的遮罩层及高亮矩形部分就是基于 SVG 实现的，详情可见往期文章 不使用第三方库怎么实现【前端引导页】功能？

动画绘制

通常会存在需要与用户产生共鸣或互动的场景，特别是需要满足创意性排版的需求等，最常见比如公司年度回顾、一些重要内容的营销宣传等，也可基于 SVG 的方式来实现。

当然你也可以基于 greensock （一个业界知名的工具套件）实现快速使用基于 SVG 的动画形式，如下：

SVG 基本形状元素

SVG 图像是使用各种元素创建的，这些元素分别应用于矢量图像的结构、绘制与布局，因此和 SVG 元素相关的内容是需要去了解的，但内容不算少，按 A-Z 的顺序大概包括以 A、C、D、E、F、G、H、I、L、M、P、R、S、T、U、V 等作为前缀的元素，按类别还可以分类为：

在本文中我们将焦点关注在 基本形状元素 上。

`<circle>` 圆形元素

<circle> 是用来创建圆，它是基于一个圆心和一个半径，对应属性为：

cx 表示圆心的 X 坐标
cy 表示圆心的 Y 坐标
r 表示半径

<svg>
    <circle cx="50" cy="50" r="50"></circle>
</svg>

从上图可以看得出来 <svg> 默认的宽高为 300 * 150。

那么如果想要其他 html 元素一样添加 边框色 和 背景色，该怎么办呢？

SVG 元素可不是使用 border-color 和 background-color 属性实现的，而是通过 stroke 和 fill 来实现的：

 <svg>
    <circle cx="50" cy="50" r="50" fill="pink" stroke="green"></circle>
 </svg>

`<rect>` 矩形元素

<rect> 元素用来创建矩形，基于一个角位置以及它的宽和高，还可以用来创建圆角矩形，其对应属性有：

x 表示 x 轴坐标
y 表示 y 轴坐标
rx 用于定义水平轴向的圆角半径尺寸
ry 用于定义纵轴向的圆角半径尺寸

常规矩形：

<svg>
   <rect x="25" y="25" width="100" height="100" fill="pink" stroke="green"></rect>
</svg>

圆角矩形：

<svg>
   <rect x="25" y="25"  width="100" height="100" rx="10" fill="pink" stroke="green"></rect>
</svg>

矩形变圆形：正方形时将 rx 或 ry 设置为宽高的一半即可，长方形时可变椭圆

<svg>
   <rect x="25" y="25"  width="100" height="100" rx="50" fill="pink" stroke="green"></rect>
</svg>

`<ellipse>` 椭圆元素

<ellipse> 元素用来创建一个椭圆，基于一个中心坐标、x 半径、y 半径：

cx 定义一个中心点的 x 轴坐标
cy 定义一个中心点的 y 轴坐标
rx 用于定义水平轴向的圆角半径尺寸
ry 用于定义纵轴向的圆角半径尺寸

<svg>
   <ellipse cx="150" cy="75" rx="100" ry="50" fill="pink" stroke="green"></ellipse>
 </svg>

椭圆变圆形：只需要将 rx 和 ry 设置为相同值即可

<svg>
   <ellipse cx="150" cy="75" rx="50" ry="50" fill="pink" stroke="green"></ellipse>
</svg>

`<line>` 线条元素

<line> 用来创建一条连接两个点的线，其属性有：

x1 表示第一个点的 x 坐标
x2 表示第二个点的 x 坐标
y1 表示第一个点的 y 坐标
y2 表示第二个点的 y 坐标

值得注意的是：需要为 stroke 赋对应的色值，否则是无法观察到效果

  <svg>
    <line x1="50" y1="20" x2="150" y2="100" stroke="red"></line>
  </svg>

`<polyline>` 折线元素

<polyline> 是用来创建一系列直线，也就是连接多个点，它通常创建的是一个开放的形状，即最后一点不与第一点相连，如果需要闭合形式可以使用 <polygon> 元素。

其专有属性为：

points 用于表示多个点的坐标：x1,y1 x2,y2 x3,y3 ... xn,yn

<svg>
    <polyline
    points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
    fill="white" 
    stroke="red" 
    stroke-width="4"
    ></polyline>
</svg>

`<polygon>` 多边形元素

<polygon> 元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状，最后一点连接到第一点，其属性和 <polygon> 一致，不同在于表现上。

例如同一个例子在 <polygon> 的表现如下：

<svg>
    <polygon
      points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
      fill="white" 
      stroke="red" 
      stroke-width="4"
    ></polygon>
</svg>

`<path>` 路径元素

<path> 元素是用来定义形状的通用元素，所有的基本形状都可以用 path 元素来创建。

其专有属性包括：

d 用于定义一个要绘制的路径，路径定义是一个 路径命令（下文中会介绍） 组成的列表，其中的每一个命令由命令字母和用于表示命令参数的数字组成
```
  <svg>
    <path
      fill="#f40"
      stroke="#000"
      d="M 10,30
   A 20,20 0,0,1 50,30
   A 20,20 0,0,1 90,30
   Q 90,60 50,90
   Q 10,60 10,30 z"
    />
  </svg>
```

路径命令

路径命令是对要绘制的路径的说明，每一个命令由代表命令的字母和代表参数的数字组成，SVG 定义了六种路径命令类型，一共 20 条命令。

移动到：M、m
画线至：L、l、H、h、V、v
三次方贝塞尔曲线：C、c、S、s
二次方贝塞尔曲线：Q、q、T、t
椭圆曲线：A、a
封闭路径：Z、z

不难发现命令是区分大小写的（即大小写敏感），大写的命令指定 绝对坐标，小写命令指定 相对坐标（相对当前位置的）。

命令中的数字可以使用负数形式，只不过代表的意思不同：

对角度而言负数表示是 逆时针
在 绝对坐标 中，-x 和 -y 均表示为负坐标
在 相对坐标 中，-x 值为向左移动，负的 -y 值为向上移动

MoveTo 命令

顾名思义，就是指从 当前点 移动到 下一点，即从 当前位置（Po {xo, yo}） 移动到 新位置（Pn {xn, yn}），并且 Pn 与 Po 之间不会绘制连接线：

M 绝对坐标，将当前位置移动到坐标 x,y
m 相对坐标，将当前位置沿 x 轴移动 dx，沿 y 轴移动 dy，即
Pn = { xo + dx, yo + dy }

<svg>
    <path
      fill="none"
      stroke="#f40"
      stroke-width="10"
      d="M 10,10 h 30
      m  0,10 h 30
      m  0,10 h 30
      M 40,20 h 30
      m  0,10 h 30
      m  0,10 h 30
      m  0,10 h 30
      m  -30,10 h 30
      m  -60,10 h 30
      m  -60,10 h 30
      m  -60,10 h 30
      m  -60,10 h 30"
    />
</svg>

Lineto 命令

Lineto 指令将绘制一条直线段，从 当前位置 （Po { xo, yo }） 移到 指定位置（Pn { xn, yn }），指定位置（Pn） 将变成下一个命令中的 当前位置（Po）**：

L 在当前位置和指定位置 x,y 之间绘制 一条线段
- 即 Po = Pn = { x, y }
I 在当前位置和指定位置 x,y 之间绘制 一条线段，指定位置为当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处
- 即 Po = Pn = { xo + dx, yo + dy }
H 在当前位置与指定位置之间绘制一条 水平线段，指定位置由 x 参数和当前位置的 y 坐标指定
- 即 Po = Pn = { x, yo }
h 在当前位置与指定位置之间绘制一条 水平线段，指定位置由当前位置沿 x 轴偏移 dx 的 x 坐标和当前位置的 y 坐标指定
- 即 Po = Pn = { xo + dx, yo }
V 在当前位置与指定位置之间绘制一条 垂直线段，指定位置由 y 参数和当前位置的 x 坐标指定
- 即 Po = Pn = { xo, y }
v 在当前位置与指定位置之间绘制一条 垂直线段，指定位置由当前位置沿 y 轴偏移 dy 的 y 坐标和当前位置的 x 坐标指定
- 即 Po = Pn = { x, yo + dy }

<svg>
    <path
      fill="none"
      stroke="#f40"
      stroke-width="10"
      d="M 10,10
      L 100,100
      V 10
      H 30"
    />
</svg>

三次贝塞尔曲线

三次 贝塞尔曲线 是使用 四个点 定义的平滑曲线，绘制完成后 终点（Pn） 将成为下一个命令中的 当前位置（Po）：

起始点（当前位置） — 第一个点
(Po = {xo, yo})
终点 — 第二个点
(Pn = {xn, yn})
起始控制点 — 第三个点
(*Pcs* = {xcs, ycs})（控制在起点附近的曲线的曲率）
终点控制点 — 第四个点
(Pce = {xce, yce})（控制在终点附近的曲线的曲率）

其对应的命令如下：

C
- 在 当前位置 和 终点 x,y 之间绘制一条三次贝塞尔曲线，起始控制点 通过 x1,y1 指定，终点控制点 通过 x2,y2 指定
- 参数形式为 (x1,y1, x2,y2, x,y)，各点表示 **`Po = Pn = {x, y}；
Pcs = {x1, y1}；Pce = {x2, y2}`**
c
- 在 当前位置 和终点（当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处）之间绘制一条三次贝塞尔曲线，起始控制点 为当前位置沿 x 轴偏移 dx1、沿 y 轴偏移 dy1 处；终点控制点 为当前位置沿 x 轴偏移 dx2、沿 y 轴偏移 dy2 处
- 参数形式为 (dx1,dy1, dx2,dy2, dx,dy)，各点表示 Po = Pn = {xo + dx, yo + dy} ；Pcs = {xo + dx1, yo + dy1} ；Pce = {xo + dx2, yo + dy2}
S
- 在 当前位置 和 终点 x,y 之间绘制一条平滑的三次贝塞尔曲线，终点控制点 通过 x2,y2 指定，起始控制点 是上一条曲线命令的终点控制点在当前位置上的 反射点；若上一条命令不是曲线命令，则其与曲线的 起始点（当前位置） 相同
- 参数形式为 (x2,y2, x,y)
s
- 在 当前位置 和终点（当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处）之间绘制一条平滑的三次贝塞尔曲线，终点控制点 为当前位置沿 x 轴偏移 dx2、沿 y 轴偏移 dy2 处；起始控制点 是上一条曲线命令的终点控制点在当前位置上的 反射点；若上一条命令不是曲线命令，则其与曲线的 起始点（当前位置） 相同
- 参数形式为 (dx2,dy2, dx,dy)

<svg>
    <path
      fill="none"
      stroke="red"
      d="M 10,90
       C 30,90 25,10 50,10
       S 70,90 90,90"
    />

    <path
      fill="none"
      stroke="red"
      d="M 110,90
       c 20,0 15,-80 40,-80
       s 20,80 40,80"
    />
</svg>

二次贝塞尔曲线

二次 贝塞尔曲线是使用 三个点 定义的平滑曲线，绘制完成后 终点（Pn） 将成为下一个命令中的 当前位置（Po） ：

起始点（当前位置）
Po = {xo, yo} — 第一个点
终点
Pn = {xn, yn} — 第二个点
控制点 — 第三个点
Pc = {xc, yc}（控制曲率）

其对应命令如下：

Q
- 在 当前位置 和 终点 x,y 之间绘制一条二次贝塞尔曲线，控制点 通过 x1,y1 指定
- 参数形式为 (x1,y1, x,y)，各点表示 Po = Pn = {x, y} ；Pc = {x1, y1}
q
- 在 当前位置 和终点（当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处）之间绘制一条二次贝塞尔曲线，控制点 为当前位置（曲线的起始点）沿 x 轴偏移 dx1、沿 y 轴偏移 dy1 处
- 参数形式为 (dx1,dy1, dx,dy)，各点表示 Po = Pn = {xo + dx, yo + dy} ；Pc = {xo + dx1, yo + dy1}
T
- 在 当前位置 和 终点 x,y 之间绘制一条平滑的二次贝塞尔曲线，控制点 是上一条曲线命令的控制点在当前位置上的 反射点；若上一条命令不是曲线命令，则其与曲线的 起始点（当前位置） 相同
- 参数形式为 (x, y)，各点表示 Po = Pn = {x, y}
t
- 在 当前位置 和终点（当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处）之间绘制一条平滑的二次贝塞尔曲线，控制点 是上一条曲线命令的控制点在当前位置上的 反射点；若上一条命令不是曲线命令，则其与曲线的 起始点（当前位置） 相同
- 参数形式为 (dx, dy)，各点表示 Po = Pn = {xo + dx, yo + dy}

<svg>
    <path
      fill="none"
      stroke="red"
      d="M 10,50
       Q 25,25 40,50
       t 30,0 30,0 30,0 30,0 30,0"
    />
</svg>

椭圆曲线

椭圆曲线 实际上就是用来定义为椭圆的一部分的曲线，当需要绘制 高度规则的曲线 时使用 椭圆曲线 相比于 贝塞尔曲线 会更容易：

A
- 在 当前位置 和 坐标 x,y 之间绘制一条椭圆曲线，用于绘制圆弧的椭圆中心根据命令的其他参数确定，参数形式 (rx ry angle large-arc-flag sweep-flag x y)
- 坐标 x,y 将成为下一个命令中的当前位置
a
- 在 当前位置 和 指定位置 之间绘制一条椭圆曲线，指定位置 为当前位置沿 x 轴偏移 dx、沿 y 轴偏移 dy 处，用于绘制圆弧的椭圆中心根据命令的其他参数确定，参数形式 (rx ry angle large-arc-flag sweep-flag dx dy)
- 坐标 dx,dy 将成为下一个命令中的当前位置

A 和 a 共同参数表示如下：

rx 和 ry 是椭圆的两个半径
angle 表示椭圆相对于 x 轴的旋转角度
large-arc-flag 和 sweep-flag 允许选择必须绘制的弧线，因为其他参数可以绘制 4 条可能的弧线
- large-arc-flag 允许选择一个 大弧线（1）或一个 小弧线（0）
- sweep-flag 允许选择一条 顺时针 旋转的弧线（1）或一条 逆时针 旋转的弧线（0）

  <svg stroke-width="4">
    <path
      fill="none"
      stroke="red"
      d="M 150,50
       A 150 50 10 1 0 14,10"
    />
    <path
      fill="none"
      stroke="lime"
      d="M 150,50
       A 150 50 10 1 1 14,10"
    />
    <path
      fill="none"
      stroke="purple"
      d="M 150,50
       A 150 50 10 0 1 14,10"
    />
    <path
      fill="none"
      stroke="pink"
      d="M 150,50
       A 150 50 10 0 0 14,10"
    />
 </svg>

ClosePath

ClosePath 命令将从 当前位置 绘制一条直线到路径中的 第一个点，其对应的命令为 Z 或 z，没有什么参数，并且大小写不敏感。

<svg stroke-width="3">
    <path
      fill="pink"
      stroke="red"
      d="M 150,50
       l -10,50 80,0
       z"
    />
</svg>

基础案例实践

由于文章篇幅有限，第一个案例会说得细一些，后续的案例就不再一一详细分析了。

环形进度条

这个应该是比较常见的一个需求了，但是如果不让使用组件库你打算怎么实现？

要是没有了解 SVG 之前，恐怕连这么个看似简单的效果都不好实现，但是现在我们可以借助 SVG 来实现，或者我们先来看看组件库是怎么实现的：

以上是 ElementUi 中的实现，没错就是 SVG ，现在你知道其实你项目里一直都有在用 SVG 了吧！

简单分析

整体可以看成是 两个圆形 重叠，因此可以通过 <circle> 元素实现（也可以选择 <path>元素，如上述给出的例图）
<circle> 元素默认是会绘制整个圆，但是进度条肯定不是一开始就是 100% 的，因此可以使用 stroke-dashoffset 属性 来将完整的圆变成部分的，但是直接使用 stroke-dashoffset 属性是不会生效的，因为它要配合 stroke-dasharray 属性 一起来使用
- stroke-dashoffset：指定 dash 模式到 路径开始 的距离
- stroke-dasharray：控制用来描边的 点划线 的图案范式，其实你完全可以结合 border: 1px solid dash 来理解，就是用于将一段连续的内容变成非连续的，设置了它就开启了 dash 模式

静态实现

<svg stroke-width="5">
    <!-- 背景圆形 -->
    <circle cx="150" cy="75" r="50" stroke="#ebeef5" fill="none"></circle>

    <!-- 进度条 -->
    <circle
      class="process-circle"
      cx="150"
      cy="75"
      r="50"
      stroke="#20a0ff"
      transform="rotate(-90 150 75)"
      fill="none"
      stroke-dasharray="314"
      stroke-dashoffset="314"
    ></circle>
</svg>

添加动画

通过以上的方式就实现了一个静态的环形进度条了，接下来就需要它动起来，由于 stroke-dasharray（在这它的值其实就是圆的周长） 和 stroke-dashoffset 的属性值是需要动态生成的，因此我们得添加一些 JavaScript 代码：

function setProcessCircle(percent = 0) {
    const processCircle = document.querySelector('.process-circle')

    // 获取圆的周长
    const circumference = processCircle.getTotalLength()

    // 把周长赋值给 strokeDasharray
    processCircle.style.strokeDasharray = circumference

    // 动态计算 offset 赋值给 strokeDashoffset
    // 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
    processCircle.style.strokeDashoffset =
      circumference * (1 - parseInt(percent) / 100)
}

效果图中的 html + css 部分就不贴出来了，容易占篇幅。

loading 动画

例如 ElementUI 中区域加载的 loading 形式如下：

简单分析

观察整体不难发现只需要一个圆形，即使用 <circle> 元素即可
其蓝色部分一直在缩短或增长，这点可以通过 stroke-dasharray 和 stroke-dashoffset 属性来实现，同时添加 transition 过渡动画即可
最后是每个缩短或增长的位置不是相同的，那么可以直接用过动画 animation 和 roate 来实现停的旋转即可

具体实现

// html
<svg stroke-width="3">
    <circle
      cx="50"
      cy="50"
      r="20"
      fill="none"
      class="circle-loading"
    ></circle>
</svg>

// style
<style>
  .circle-loading {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke: #409eff;
    stroke-linecap: round;
    animation: loading-dash 1.5s ease-in-out infinite, 
    laoding-color 1.5s ease-in-out infinite;
  }

  @keyframes laoding-color {
    0% {
      stroke: #de3e35;
    }
    25% {
      stroke: #ffa500;
    }
    50% {
      stroke: #ffff00;
    }
    75% {
      stroke: #008000;
    }
    100% {
      stroke: #0000ff;
    }
  }

  @keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
    }

    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px;
    }

    to {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px;
    }
  }
</style>

按钮动效

简单分析

外层包裹的矩形可以通过 <rect> 元素实现
矩形的线条残缺不完整，可以通过 stroke-dasharray 和 stroke-dashoffset 属性来实现
当鼠标放置上去时，产生的动画可通过 animation、stroke-dasharray 、stroke-dashoffset 等属性结合即可

具体实现

// html
 <svg class="svg-wrap">
    <text class="text" x="60" y="75">CLICK HERE</text>
    <rect class="rect" x="40" y="35" />
  </svg>

// style
<style>
  .svg-wrap {
    stroke-width: 3px;
    background-color: black;
  }

  .rect {
    height: 60px;
    width: 220px;
    stroke: #fff;
    fill: transparent;
    stroke-dasharray: 220 60;
    stroke-dashoffset: -260;
    stroke-width: 4px;
  }

  .text {
    fill:  #1287f4;
    font-size: 30px;
  }

  .svg-wrap:hover .rect {
    animation: line-move 0.5s linear forwards;
  }

  .svg-wrap:hover .text{
    fill:  #fff;
    transition: all 1s ease-in-out;
  }

  @keyframes line-move {
    0% {
      stroke-dasharray: 220 60;
      stroke-dashoffset: -260;
      stroke-width: 4px;
      stroke: #e32727;
    }
    to {
      stroke-dasharray: 560;
      stroke-dashoffset: 0;
      stroke-width: 2px;
      stroke: #1234f4;
    }
  }
</style>

复杂案例实战

以上的基础案例由于涉及的计算不多，因此我们可以人工进行计算宽、高、偏移等等数据，但是针对复杂的内容，很多参数就不是那么容易计算出来了，因此，我们需要一些工具来快速得到一些必要参数，然后我们在基于这些必要参数取做修改，让其产生更丰富的效果即可。

工具推荐

和 SVG 相关的工具就现在来说已经遍地开花了（就好像现在的 ChatGPT、文心一言），通过搜索引擎查找都能找出来很多，这里也不谈这些工具的优劣了，下面简单列举一些：

figma：支持浏览器在线，支持客户端下载
sketch：支持浏览器在线，支持客户端下载（Mac）
Adobe Illustrator：支持浏览器在线，支持客户端下载
Pixso：号称 Sketch 的新选择，几乎还原了Sketch 的专业功能
...

下面的示例都是基于 figma 来演示的，不再后续赘述。

文字动效

还是同样的第一个案例这里尽量讲详细点，后续案例就不再述说过于详细的内容了。

使用 figma 创建文字路径如下

由于文字内容的路径很难直接计算处理，因此我们可以通过 figma 来帮助我们生成相应的文字路径，大致操作如下：

处理 SVG 代码内容

得到的 SVG 内容大致如下，代码内容比较多这里用图片代替，其中各个内容的对应关系如下所示：

其中的 <mask> 需要去掉，否则文字的颜色值将无法填充。

stroke-dasharray & stroke-dashoffset 属性

由于我们需要让文字具备断续连接的能力，这里还是得使用前面提到 stroke-dasharray 和 stroke-dashoffset 属性来实现，它们的功能前面已经描述过了，也用了几次了，如果你不记得了可以回过头去看看。

但是这里的 stroke-dasharray 和 stroke-dashoffset 的值到底该设置成多少呢？

首先一定是设置成每个文字的长度，那么问题就变成了怎么获取文字的长度了，不用担心，还记得在实现 环形进度条 时用到的 getTotalLength() 方法吗？

这里我们仍然可以使用它来获取每个文字的长度了，代码如下：

 const paths = document.querySelectorAll('path')
  for (const [ptah,index] of paths) {
    console.log(`path 的路径长度 = ${ptah.getTotalLength()}`)
  }
  
  输出结果：
   path 的路径长度 = 179.47874450683594  S
   path 的路径长度 = 150.7733917236328   V
   path 的路径长度 = 274.966064453125    G
   path 的路径长度 = 442.99505615234375  文
   path 的路径长度 = 514.3809204101562   字

接下来为每个 path 设置样式：

#svg-text > path:nth-of-type(1) {
    stroke-dasharray: 179.479;
    stroke-dashoffset: 179.479;
}
#svg-text > path:nth-of-type(2) {
    stroke-dasharray: 150.773;
    stroke-dashoffset: 150.773;
}
#svg-text > path:nth-of-type(3) {
    stroke-dasharray: 274.966;
    stroke-dashoffset: 274.966;
}
#svg-text > path:nth-of-type(4) {
    stroke-dasharray: 442.995;
    stroke-dashoffset: 442.995;
}
#svg-text > path:nth-of-type(5) {
    stroke-dasharray: 514.381;
    stroke-dashoffset: 514.381;
}

设置了这些值之后，文字内容就会不可见了，而这也是 动画的初始状态。

animation 动画

前面种种操作已经完成了动画的初始状态，接下来我们要添加上 animation 动画，核心改变的就是 stroke-dashoffset 的值，就是把它设置成 0，文字内容就会被从隐藏变成显示，再添加过渡时间就完成了，重复内容就不贴出来了：

#svg-text > path:nth-of-type(1) {
    /* ... */
    animation: text-line 2s ease forwards;
}
#svg-text > path:nth-of-type(2) {
    /* ... */
    animation: text-line 2s ease forwards 300ms;
}
#svg-text > path:nth-of-type(3) {
     /* ... */
    animation: text-line 2s ease forwards 600ms;
}
#svg-text > path:nth-of-type(4) {
    /* ... */
    animation: text-line 2s ease forwards 900ms;
}
#svg-text > path:nth-of-type(5) {
    /* ... */
    animation: text-line 2s ease forwards 1200ms;
}

#svg-text{
    stroke: #d205f7;
    fill: none;
    animation: fill-color 2.5s ease-in forwards;
}

@keyframes text-line {
    to {
      stroke-dashoffset: 0;
    }
}

@keyframes fill-color{
    to{
      stroke: transparent;
      fill: #d205f7;
    }
}

重复的事交给 JavaScript

上面才 5 个文字就需要写那么多的样式，属实不能忍，于是我们可以将重复的部分交给 JavaScript 代码去处理：

<style>
  #svg-text {
    stroke: #d205f7;
    stroke-width: 2px;
    fill: none;
    animation: fill-color 2.5s ease-in forwards;
  }

  @keyframes text-line {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes fill-color {
    to {
      stroke: transparent;
      fill: #d205f7;
    }
  }
</style>

<script>
    function init() {
        const paths = Array.from(document.querySelectorAll('path'))
        paths.forEach((path, index) => {
          const len = path.getTotalLength()
          path.style.strokeDasharray = len
          path.style.strokeDashoffset = len
          path.style.animation = `text-line 2.5s ease-in forwards ${
            index * 300
          }ms`
        })
    }

    init()
</script>

运动轨迹

简单分析

完成以上效果需要包括以下几个内容：

获取 目标物 的 SVG 代码
绘制 运动路径
让目标物 沿着路径运动
获取目标物的 SVG 代码
这个可以直接从 iconfont 上选择对应的内容，然后复制它的 SVG 代码。

绘制运动路径

运动路径的绘制我们仍然可以通过 SVG 工具 figma 来获取，值得注意的是默认的路径是用还是填充的，真正在应用时可以通过 stroke="transparent" 将路径颜色变成透明色，整体感官更好，大致如下：

让目标物沿着路径运动

针对这种按特定运动轨迹进行的动画，也不需要你去一点点计算了，我们可以借助 GreenSock 中的 motionpath 插件来实现，在其对应的文档中有详细的介绍，核心就是引入以下两个内容：

<div id="app">
  <!-- 鸟 -->
  <svg
    id="bird"
    t="1679665908640"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="14202"
    width="100"
    height="100"
  >
    省略内容
  </svg>

  <!-- 路径 -->
  <svg
    width="719"
    height="419"
    viewBox="0 0 719 419"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      id="path"
      d="M1 268C146.006 483.259 245.695 450.805 336 268C518.233 -96.9549 599.902 -63.7284 718 222"
      stroke="transparent"
    />
  </svg>
</div>

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js"></script>
<script>
  // 注册插件
  gsap.registerPlugin(MotionPathPlugin);
  
  // 开启动画
  gsap.to("#bird", {
    duration: 5,
    repeat: 12,
    repeatDelay: 1,
    yoyo: true,
    ease: "power1.inOut",
    motionPath: {
      path: "#path",
      align: "#path",
      alignOrigin: [0.5, 0.5],
    },
  });
</script>

最后

欢迎关注同名公众号《熊的猫》，后续文章会同步更新！

以上就是本文有关 SVG 基础部分的介绍和使用了，不知道你是入门了，还是被门绊了一下，还是那句话：希望本文对你所有帮助！！！

前言

SVG 简介

是什么？

具有什么优势？

可缩放矢量图形

可编码性

SVG 的使用场景

icon 图标

平面图绘制

动画绘制

SVG 基本形状元素

<circle> 圆形元素

<rect> 矩形元素

<ellipse> 椭圆元素

<line> 线条元素

<polyline> 折线元素

<polygon> 多边形元素

<path> 路径元素

基础案例实践

环形进度条

简单分析

静态实现

添加动画

loading 动画

简单分析

具体实现

按钮动效

简单分析

具体实现

复杂案例实战

工具推荐

文字动效

使用 figma 创建文字路径如下

处理 SVG 代码内容

stroke-dasharray & stroke-dashoffset 属性

animation 动画

重复的事交给 JavaScript

运动轨迹

简单分析

获取目标物的 SVG 代码

绘制运动路径

让目标物沿着路径运动

最后

`<circle>` 圆形元素

`<rect>` 矩形元素

`<ellipse>` 椭圆元素

`<line>` 线条元素

`<polyline>` 折线元素

`<polygon>` 多边形元素

`<path>` 路径元素