「趣学前端」SVG，边学边做
选择一项技术的原因
“只识其形，不知其根”。这是我之前对 SVG 掌握程度。SVG 并不是一项新技术，但是我并没有熟练掌握它。一方面因为日常工作中，鲜少用到，还有一方面是因为 SVG 绘制的成本相对找设计的同事帮忙提供 UI 高一些。
日常开发趋于稳定，为了避免出现安逸心理，以及对突破的追求，我开始自己寻找一些技术挑战。于是，对 SVG 的学习提上了日程。
之所以选择 SVG，是因为之前正好做了项目 UI 的重构，其中 Icon 组件，固定思维是使用 font 图标，后来细想了一下是否可以使用 SVG 绘制实现，于是翻看了 Ant Design 的代码，果然，Ant Design 已经用 SVG 图标替换了原先的 font 图标。
找对适合自己的路
凡有所学，皆成性格
作为一个努力的普通人，我有时候会害怕努力之后仍然没有达到自己想要的结果。有时候担心耗费了精力和时间，研究了某个技术研究，但是无用武之地，难免会感到徒劳无获的挫败。
但是随着时间的推移，我发现当初的积累全都变成了自己自如应对需求的利器。于是，我遇到新的技术，不再瞻前顾后，不再踟蹰不决，与其惶惶不可终日的忧心自己要学的太多，不如一鼓作气的把它拿下。
哪条大路通罗马
有时候我会有这样的错觉，我将所有的知识点看完，感觉不是很难，就觉得自己都会了。所以学完之后的某一天，真的需要用到它时，并没有思路到底该怎么做。
一切皆因对这门技术并没有达到熟练掌握的程度，只是简单的熟悉了它的内容。
到底哪条路，才能让我到达我想去的罗马？伴随着尝试和检验，我慢慢掌握了学习的诀窍之一，那便是有目的的边学边做。
漫无目的的看一遍技术文档，能够记住的内容很少，能够吸收的更是少之又少。带着明确目，到底学完一门技术，想要达到的程度是什么。比如，SVG 绘制图形，基础图形绘制很简单，但是实际工作中的需求一般不会这么简单。所以我带着学完要实现具体功能的目前去看它的文档。对于不熟悉的技术，怎么确定具体功能呢？我会找一些成熟的优秀的网站，看那些网站应用该技术实现了哪些功能，具体是怎么实现的。比如 antd 已使用 SVG 图标替换了原先的 font 图标，里面有大量的图形供我参考，我可以边学边做，还能查看参考答案。
于是，我找到了通往我想去的罗马的路。
活学-SVG 基础
其中对于 SVG 的知识点解释大部分来自MDN
识其形
介绍
SVG,可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 CSS，DOM，JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
基础要素
HTML 提供了定义标题、段落、表格等等内容的元素。与此类似，SVG 也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的 SVG 文档由<svg>根元素和基本的形状元素构成。另外还有一个 g 元素，它用来把若干个基本形状编成一个组。
从这些开始，SVG 可以变得更加复杂。SVG 支持渐变、旋转、动画、滤镜效果、与 JavaScript 交互等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。
浏览器兼容
所有的现代浏览器都支持 SVG，在某些情况下甚至几个版本都支持 SVG。Can I use上有一份比较详细的支持 SVG 的浏览器列表，Firefox 1.5 以后的版本支持 SVG 的部分内容，并且支持的程度越来越高。
规范
SVG 的元素和属性必须按标准格式书写，因为 XML 是区分大小写的（这一点和 HTML 不同）；2）SVG 里的属性值必须用引号引起来，就算是数值也必须这样做。
坐标定位
网格
svg 绘制图形，是在它提供的画布上面，使用坐标系统或者说网格系统。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。
如下图，我将坐标原点标注出来了，背景是 10*10 的网格，可以很明显的看出来，绘制的矩形 x 轴距离原点是 50 像素，y 轴距离原点是 50 像素，自身宽高都是 50 像素。
什么是 "像素"?
基本上，在 SVG 文档中的 1 个像素对应输出设备（比如显示屏）上的 1 个像素。
SVG 也支持图形缩放。SVG 可以定义绝对大小（比如使用“pt”或“cm”标识维度）同时 SVG 也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。
通过设置 viewBox 可以实现缩放的效果：
viewBox 属性定义了画布上可以显示的区域：从(0,0)点开始，100 宽 100 高的区域。这个 100100 的区域，会放到 200*200 的画布上显示。效果如下图，此时矩形 x 轴距离原点是 100 像素，y 轴距离原点是 100 像素，自身宽高都是 100 像素。这样就达到了两倍放大的效果。
用户坐标系统
用户单位和屏幕单位的映射关系被称为用户坐标系统。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统 1 用户像素等于设备上的 1 像素（但是设备上可能会自己定义 1 像素到底是多大）。在定义了具体尺寸单位的 SVG 中，比如单位是“cm”或“in”，最终图形会以实际大小的 1 比 1 比例呈现。
基本形状
不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余， 但是它们用起来方便，可让我们的 SVG 文档简洁易懂。
矩形
rect 元素可以绘制矩形 。
不难发现，右边的图形相较左边的图形是带圆角的，这是由于右边的图形设置了 rx 和 ry。这里介绍一下矩形的 6 个基本元素：
x：矩形左上角的 x 位置
y：矩形左上角的 y 位置
width：矩形的宽度
height：矩形的高度
rx：圆角的 x 方位的半径
ry：圆角的 y 方位的半径
通过这 6 个基本属性就可以控制矩形在屏幕上的位置和形状。
圆形
circle 元素可以绘制圆形。
上面的代码，在页面的展示如下图：
仔细看会发现，圆心在 x:40、y:40 的点上，这也是 cx 和 cy 这两个元素起到的作用：
r:圆的半径
cx:圆心的 x 位置
cy:圆心的 y 位置
椭圆
Ellipse 是 circle 元素更通用的形式，你可以分别缩放圆的 x 半径和 y 半径（通常数学家称之为长轴半径和短轴半径）。
上面的代码，在页面的展示如下图：
与圆形相比，椭圆可以分别设置 r 半径和 y 半径。注：绘制椭圆时，r 半径和 y 半径必须都设置，否则会变成圆形。
rx:椭圆的 x 半径
ry:椭圆的 y 半径
cx:椭圆中心的 x 位置
cy:椭圆中心的 y 位置
线条
Line 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。
上面的代码，在页面的展示如下图：
直线由两个点，四个元素控制在屏幕上的位置和形状。
x1:起点的 x 位置
y1:起点的 y 位置
x2:终点的 x 位置
y2:终点的 y 位置
折线
Polyline 是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个 points 属性中：
上面的代码，在页面的展示如下图：
折线由一组点集合控制在屏幕上的位置和形状。
points：点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。
多边形
polygon 和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon 的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。
上面的代码，在页面的展示如下图：
假如你有一支画笔，从一点出发，polygon 可以让你自动回到起点，完成一个多边形。
points：点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。
路径
<path>元素是 SVG 基本形状中最强大的一个。 你可以用它创建线条, 曲线, 弧形等等。
path 只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然 polyline 元素也能实现类似的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），并且这种做法不能够放大（放大后，点的离散更明显）。所以在绘制 SVG 时，对路径的良好理解很重要
直线命令
M
M 是需要移动到的点的 x 轴和 y 轴的坐标。M 命令仅仅是移动画笔，但不画线。所以 M 命令经常出现在路径的开始处，用来指明从何处开始画。
L
L 命令将会在当前位置和新位置（L 前面画笔所在的点）之间画一条线段。L 需要两个参数，分别是一个点的 x 轴和 y 轴坐标。
H
H 命令绘制水平线。这个命令都只带一个参数，标明在 x 轴或 y 轴移动到的位置，因为它只在坐标轴的一个方向上移动。
V
V 命令绘制垂直线。这个命令都只带一个参数，标明在 x 轴或 y 轴移动到的位置，因为它只在坐标轴的一个方向上移动。
Z
Z 命令会从当前点画一条直线到路径的起点。Z 命令不用区分大小写。
示例
上述路径是：画笔移动到(10,10)点，由此开始，向右移动 80 像素构成一条水平线，然后向下移动 80 像素，然后向左移动 80 像素，然后再回到起点。绘制的图形如下：
曲线命令
绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。贝塞尔曲线的类型有很多，但是在 path 元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线 C，和二次贝塞尔曲线 Q。
贝塞尔曲线
三次贝塞尔曲线需要定义一个点和两个控制点，所以用 C 命令创建三次贝塞尔曲线，需要设置三组坐标参数：
S
S 命令可以用来创建贝塞尔曲线，命令如下:
如果 S 命令跟在一个 C 或 S 命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果 S 命令单独使用，前面没有 C 或 S 命令，那当前点将作为第一个控制点。
效果如下：
Q
Q 命令可以创建二次贝塞尔曲线，命令如下：
它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。
效果如下：
T
T 命令可以创建二次贝塞尔曲线。命令如下：
快捷命令 T 会通过前一个控制点，推断出一个新的控制点。需要注意的是，T 命令前面必须是一个 Q 命令，或者是另一个 T 命令，才能达到这种效果。如果 T 单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
效果如下：
A
弧形命令 A 是另一个创建 SVG 曲线的命令。命令如下：
基本上，弧形可以视为圆形或椭圆形的一部分。弧形命令 A 的前两个参数分别是 x 轴半径和 y 轴半径。
效果如下：
填充和边框
既然是图形，那么内部颜色和边框属性都是可以改变的。
上色
fill 属性设置对象内部的颜色。stroke 属性设置绘制对象的线条的颜色。可以使用在 HTML 中的 CSS 颜色命名方案定义它们的颜色，比如说颜色名（像 red 这种）、rgb 值（像 rgb(255,0,0)这种）、十六进制值、rgba 值，等等。
上面代码将矩形填充为白色，不透明度为 1。边框的宽度 3 像素，颜色为红色，不透明度为 0.5。属性 stroke-opacity 控制描边的不透明度。stroke-width 属性定义了描边的宽度。
描边
stroke-width
它影响描边宽度。
stroke-linecap
它控制边框终点的形状，它有三个可能值：
butt 用直边结束线段，它是常规做法，线段边界 90 度垂直于描边的方向、贯穿它的终点。
square 的效果差不多，但是会稍微超出实际路径的范围，超出的大小由 stroke-width 控制。
round 表示边框的终点是圆角，圆角的半径也是由 stroke-width 控制的。
stroke-linejoin
它用来控制两条描边线段之间，用什么方式连接。
它有三个可用的值：
miter 是默认值，表示用方形画笔在连接处形成尖角。
round 表示用圆角连接，实现平滑效果。
bevel，连接处会形成一个斜接。
stroke-dasharray
它将虚线类型应用在描边上。
stroke-dasharray 属性的参数，是一组用逗号分割的数字组成的数列。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。所以在上面的例子里，第二个路径会先做 5 个像素单位的填色，紧接着是 5 个空白单位，然后又是 5 个单位的填色。如果你想要更复杂的虚线模式，你可以定义更多的数字。
其它
另外还有一些关于填充和边框的属性，包括 fill-rule，用于定义如何给图形重叠的区域上色；stroke-miterlimit，定义什么情况下绘制或不绘制边框连接的 miter 效果；还有 stroke-dashoffset，定义虚线开始的位置。
使用 css
除了定义对象的属性外，你也可以通过 CSS 来样式化填充和描边。语法和在 html 里使用 CSS 一样，只不过你要把 background-color、border 改成 fill 和 stroke。注意，不是所有的属性都能用 CSS 来设置。上色和填充的部分一般是可以用 CSS 来设置的，比如 fill，stroke，stroke-dasharray 等，但是不包括下面会提到的渐变和图案等功能。另外，width、height，以及路径的命令等等，都不能用 css 设置。判断它们能不能用 CSS 设置还是比较容易的。
CSS 可以利用 style 属性插入到元素的行间：
或者利用<style>设置一段样式段落。就像在 html 里这样的<style>一般放在<head>里，在 svg 里<style>则放在<defs>标签里。<defs>表示定义，这里面可以定义一些不会在 SVG 图形中出现、但是可以被其他元素使用的元素。
活用-Icon 图标
我挑选了几组图标，我们按由简入繁的顺序，来看一下，根据前面学到的知识，怎么去实现这些图标。
向前和向后
这两个图标都是由线条和三角形组成。绘制结果如下图：
实现思路是由直线和折线组合完成绘制，实现代码如下：
向前图标，直线起点(10,5)，终点(10,25)，两点的 x 轴是一样的，所以绘制出来的直线是垂直的。折线，起点(24,5)，第二个点(10，15)，终点(24,25)，这样绘制出来是一个箭头的图形，需要进行颜色填充，使用 fill 属性控制填充。
向后的图标，直线与折线位置和向前的图标相反，且箭头的方向也相反。
放大和缩小
这两个图标主要由线条和圆组成。绘制结果如下图：
实现思路是由直线和圆组合完成绘制，实现代码如下：
放大图标，垂直直线起点(15,9)，终点(15,21)，水平直线起点(9,15)，终点(21,15)，圆的半径 r 为 12，圆心在点(15,15)上，倾斜直线起点(24,24)，终点(29,29)。
缩小图标和放大图标唯一区别是没有垂直直线。
回到顶部和回到底部
这两个图标主要是由线条和箭头组成。绘制结果如下图：
通过 path 绘制图形，需要绘制的点更加多，绘制难度会相对较高。
正如之前知识点中介绍的，path 元素是 SVG 基本形状中最强大的一个。只需确定一个起点，你就可以绘制你想要的图形。比如回到顶部，使用 path 元素绘制图形，所有路径放到路线元素 d 中，具体绘制路径如下：
1）从矩形左上角开始，使用 M 命令，M4 4.2，确定起点(4,4.2)，绘制正式开启。
2）使用 L 命令，L 28 4.2，沿着 X 轴移动到点(4,4.2)，这样就完成了一条水平直线。
3）使用 L 命令，L 28 6，沿着 Y 轴移动到点(28,6)，这样就完成了一条垂直直线。
4）使用 L 命令，L 4 6，沿着 X 轴移动到点(4,6)，这样就完成了一条水平直线。
5）使用 Z 命令，命令会从当前点(4,6)画一条垂直直线到路径的起点(4,4.2)。到此为止，矩形就绘制完成了。
6）继续绘制箭头图形，从箭头伞帽的顶端开始，使用 M 命令， M16 10.6，确定起点(16,10.6)。
7）使用 L 命令，L 19.5 15，移动到点(19.5 ,15)，这样就完成了一条倾斜直线。
8）使用 L 命令，L 16.7 15，沿着 X 轴移动到点(16.7 ,15)，这样就完成了一条水平直线。
9）使用 L 命令，L 16.7 27.5，沿着 Y 轴移动到点(16.7 ,27.5)，这样就完成了一条垂直直线。
10）使用 L 命令，L15.3 27.5，沿着 X 轴移动到点(15.3 ,27.5)，这样就完成了一条水平直线。
11）使用 L 命令，L 15.3 15，沿着 Y 轴移动到点(15.3,15)，这样就完成了一条垂直直线。
12）使用 L 命令，L 12.5 15，沿着 X 轴移动到点(12.5,15)，这样就完成了一条水平直线。
13）使用 Z 命令，命令会从当前点(12.5,15)画一条倾斜直线到路径的起点(16,10.6)。到此为止，箭头图形就绘制完成了。
经过绘制，一个回到顶部的图形就完成了，而对 path 元素以及它的直线命令的运用也基本掌握了。
叹号
叹号的绘制，我想介绍另一种方式，那就是通过 AI 软件绘制的方式。绘制结果如下图：
设计师同事提供给我们的 SVG 图标，我们可以通过 IDE 打开查看 SVG 代码，比如这个叹号图标，它的 SVG 代码如下：
对于复杂的图标，如果绘制上有困难，可以找设计师同事帮忙提供 SVG 文件。主要考虑到网站对图形绘制质量的要求较高，所以大家可以因地制宜。
总结
回归我们的初衷，对于 SVG 的学习，我们不仅仅要了解它，更重要的是能够将它应用到项目中并解决一些问题。
如果真有一项挑战，比如通过前端代码绘制复杂的 SVG 图形，我想我会更加有信心去胜任，而不是毫无概念，束手无策。
技术实践的另一个“真理”，多加练习。一起加油，与君共勉。
版权声明: 本文为 InfoQ 作者【叶一一】的原创文章。
原文链接:【http://xie.infoq.cn/article/917e5abda1e3a154bf8e89d45】。文章转载请联系作者。
苍生涂涂，天下缭燎，诸子百家，唯我纵横。 2022.09.01 加入
非职业传道受业解惑前端程序媛，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
评论