一、选择一项技术的原因
“只识其形，不知其根”。这是我之前对SVG掌握程度。SVG并不是一项新技术，但是我并没有熟练掌握它。一方面因为日常工作中，鲜少用到，还有一方面是因为SVG绘制的成本相对找设计的同事帮忙提供UI高一些。
日常开发趋于稳定，为了避免出现安逸心理，以及对突破的追求，我开始自己寻找一些技术挑战。于是，对SVG的学习提上了日程。
之所以选择SVG，是因为之前正好做了项目UI的重构，其中Icon组件，固定思维是使用font 图标，后来细想了一下是否可以使用SVG绘制实现，于是翻看了Ant Design的代码，果然，Ant Design已经用SVG 图标替换了原先的 font 图标。
// Ant Design文档中列的使用SVG图标的优势
- 完全离线化使用，不需要从 CDN 下载字体文件，图标不会因为网络问题呈现方块，也无需字体文件本地部署。
- 在低端设备上 SVG 有更好的清晰度。
- 支持多色图标。
- 对于内建图标的更换可以提供更多 API，而不需要进行样式覆盖。
二、找对适合自己的路
2.1 凡有所学，皆成性格
作为一个努力的普通人，我有时候会害怕努力之后仍然没有达到自己想要的结果。有时候担心耗费了精力和时间，研究了某个技术研究，但是无用武之地，难免会感到徒劳无获的挫败。
但是随着时间的推移，我发现当初的积累全都变成了自己自如应对需求的利器。于是，我遇到新的技术，不再瞻前顾后，不再踟蹰不决，与其惶惶不可终日的忧心自己要学的太多，不如一鼓作气的把它拿下。
2.2 哪条大路通罗马
有时候我会有这样的错觉，我将所有的知识点看完，感觉不是很难，就觉得自己都会了。所以学完之后的某一天，真的需要用到它时，并没有思路到底该怎么做。
一切皆因对这门技术并没有达到熟练掌握的程度，只是简单的熟悉了它的内容。
到底哪条路，才能让我到达我想去的罗马？伴随着尝试和检验，我慢慢掌握了学习的诀窍之一，那便是有目的的边学边做。
漫无目的的看一遍技术文档，能够记住的内容很少，能够吸收的更是少之又少。带着明确目，到底学完一门技术，想要达到的程度是什么。比如，SVG绘制图形，基础图形绘制很简单，但是实际工作中的需求一般不会这么简单。所以我带着学完要实现具体功能的目前去看它的文档。对于不熟悉的技术，怎么确定具体功能呢？我会找一些成熟的优秀的网站，看那些网站应用该技术实现了哪些功能，具体是怎么实现的。比如antd已使用SVG 图标替换了原先的 font 图标，里面有大量的图形供我参考，我可以边学边做，还能查看参考答案。
于是，我找到了通往我想去的罗马的路。
三、活学-SVG基础
其中对于SVG的知识点解释大部分来自MDN
3.1 识其形
介绍
SVG,可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
基础要素
HTML提供了定义标题、段落、表格等等内容的元素。与此类似，SVG也提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线。一个简单的SVG文档由根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。
从这些开始，SVG可以变得更加复杂。SVG支持渐变、旋转、动画、滤镜效果、与JavaScript交互等等功能，但是所有这些额外的语言特性，都需要在一个定义好的图形区域内实现。
浏览器兼容
所有的现代浏览器都支持SVG，在某些情况下甚至几个版本都支持SVG。Can I use上有一份比较详细的支持SVG的浏览器列表，Firefox 1.5以后的版本支持SVG的部分内容，并且支持的程度越来越高。
规范
1）SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和HTML不同）； 2）SVG里的属性值必须用引号引起来，就算是数值也必须这样做。
3.2 坐标定位
网格
svg绘制图形，是在它提供的画布上面，使用坐标系统或者说网格系统。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。
<svg width='200' height='200' fill='#555555'>
<rect x='50' y='50' width='50' height='50' />
</svg>
如下图，我将坐标原点标注出来了，背景是10*10的网格，可以很明显的看出来，绘制的矩形x轴距离原点是50像素，y轴距离原点是50像素，自身宽高都是50像素。
什么是 "像素"?
基本上，在 SVG 文档中的1个像素对应输出设备（比如显示屏）上的1个像素。
SVG也支持图形缩放。SVG可以定义绝对大小（比如使用“pt”或“cm”标识维度）同时SVG也能使用相对大小，只需给出数字，不标明单位，输出时就会采用用户的单位。
通过设置viewBox可以实现缩放的效果：
<svg width='200' height='200' fill='#555555' viewBox='0 0 100 100'>
<rect x='50' y='50' width='100' height='100' />
</svg>
viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽100高的区域。这个100100的区域，会放到200*200的画布上显示。效果如下图，此时矩形x轴距离原点是100像素，y轴距离原点是100像素，自身宽高都是100像素。这样就达到了两倍放大的效果。
用户坐标系统
用户单位和屏幕单位的映射关系被称为用户坐标系统。除了缩放之外，坐标系统还可以旋转、倾斜、翻转。默认的用户坐标系统1用户像素等于设备上的1像素（但是设备上可能会自己定义1像素到底是多大）。在定义了具体尺寸单位的SVG中，比如单位是“cm”或“in”，最终图形会以实际大小的1比1比例呈现。
3.3 基本形状
不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余， 但是它们用起来方便，可让我们的SVG文档简洁易懂。
矩形
rect元素可以绘制矩形 。
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="5" ry="5" width="30" height="30"/>
不难发现，右边的图形相较左边的图形是带圆角的，这是由于右边的图形设置了rx和ry。这里介绍一下矩形的6个基本元素：
x：矩形左上角的x位置
y：矩形左上角的y位置
width：矩形的宽度
height：矩形的高度
rx：圆角的x方位的半径
ry：圆角的y方位的半径
通过这6个基本属性就可以控制矩形在屏幕上的位置和形状。
圆形
circle元素可以绘制圆形。
<circle cx='40' cy='40' r='20' />
上面的代码，在页面的展示如下图：
仔细看会发现，圆心在x:40、y:40的点上，这也是cx和cy这两个元素起到的作用：
r:圆的半径
cx:圆心的x位置
cy:圆心的y位置
椭圆
Ellipse 是circle元素更通用的形式，你可以分别缩放圆的x半径和y半径（通常数学家称之为长轴半径和短轴半径）。
<ellipse cx='40' cy='40' rx='20' ry='10' />
上面的代码，在页面的展示如下图：
与圆形相比，椭圆可以分别设置r半径和y半径。注：绘制椭圆时，r半径和y半径必须都设置，否则会变成圆形。
rx:椭圆的x半径
ry:椭圆的y半径
cx:椭圆中心的x位置
cy:椭圆中心的y位置
线条
Line 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。
<line x1='10' x2='50' y1='10' y2='50' />
上面的代码，在页面的展示如下图：
直线由两个点，四个元素控制在屏幕上的位置和形状。
x1:起点的x位置
y1:起点的y位置
x2:终点的x位置
y2:终点的y位置
折线
Polyline是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中：
<polyline points='10 10, 50 10, 50 50, 50 50, 90 50, 90 90, 90 90, 130 90, 130 130' />
上面的代码，在页面的展示如下图：
折线由一组点集合控制在屏幕上的位置和形状。
points：点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。
多边形
polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。
// 五角星
<polygon points="50 25, 55 40, 70 40, 60 50, 65 65, 50 55, 35 65, 40 50, 30 40, 45 40"/>
// 矩形
<polygon points="100 20, 150 20, 150 70, 100 70"/>
上面的代码，在页面的展示如下图：
假如你有一支画笔，从一点出发，polygon可以让你自动回到起点，完成一个多边形。
points：点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含2个数字，一个是x坐标，一个是y坐标。所以点列表 (0,0), (1,1) 和(2,2)可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。
3.4 路径
元素是SVG基本形状中最强大的一个。 你可以用它创建线条, 曲线, 弧形等等。
path只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然polyline元素也能实现类似的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），并且这种做法不能够放大（放大后，点的离散更明显）。所以在绘制SVG时，对路径的良好理解很重要
3.4.1 直线命令
M
M是需要移动到的点的x轴和y轴的坐标。M命令仅仅是移动画笔，但不画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。
L
L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。L需要两个参数，分别是一个点的x轴和y轴坐标。
H
H命令绘制水平线。这个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它只在坐标轴的一个方向上移动。
V
V命令绘制垂直线。这个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它只在坐标轴的一个方向上移动。
Z
Z命令会从当前点画一条直线到路径的起点。Z命令不用区分大小写。
示例
<path d='M10 10 h 80 v 80 h -80 Z' fill='transparent' stroke='black' />
上述路径是：画笔移动到(10,10)点，由此开始，向右移动80像素构成一条水平线，然后向下移动80像素，然后向左移动80像素，然后再回到起点。绘制的图形如下：
3.4.2 曲线命令
绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。贝塞尔曲线的类型有很多，但是在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。
贝塞尔曲线
三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：
C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
S
S命令可以用来创建贝塞尔曲线，命令如下:
S x2 y2, x y (or s dx2 dy2, dx dy)
如果S命令跟在一个C或S命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果S命令单独使用，前面没有C或S命令，那当前点将作为第一个控制点。
<path d='M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80' stroke='black' fill='transparent' />
效果如下：
Q
Q命令可以创建二次贝塞尔曲线，命令如下：
Q x1 y1, x y (or q dx1 dy1, dx dy)
它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标。
<path d='M10 80 Q 95 10 180 80' stroke='black' fill='transparent' />
效果如下：
T
T命令可以创建二次贝塞尔曲线。命令如下：
T x y (or t dx dy)
快捷命令T会通过前一个控制点，推断出一个新的控制点。需要注意的是，T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
<path d='M10 80 Q 52.5 10, 95 80 T 180 80' stroke='black' fill='transparent' />
效果如下：
A
弧形命令A是另一个创建SVG曲线的命令。命令如下：
A rx ry x-axis-rotation large-arc-flag sweep-flag x y a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
基本上，弧形可以视为圆形或椭圆形的一部分。弧形命令A的前两个参数分别是x轴半径和y轴半径。
<path d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
效果如下：
3.5 填充和边框
既然是图形，那么内部颜色和边框属性都是可以改变的。
3.5.1 上色
fill属性设置对象内部的颜色。stroke属性设置绘制对象的线条的颜色。可以使用在HTML中的CSS颜色命名方案定义它们的颜色，比如说颜色名（像red这种）、rgb值（像rgb(255,0,0)这种）、十六进制值、rgba值，等等。
<rect x="10" y="10" width="100" height="100" stroke="red" fill="#fff" fill-opacity="1" stroke-opacity="1" stroke-width='3'/>
上面代码将矩形填充为白色，不透明度为1。边框的宽度3像素，颜色为红色，不透明度为0.5。属性stroke-opacity控制描边的不透明度。stroke-width属性定义了描边的宽度。
3.5.2 描边
stroke-width
它影响描边宽度。
stroke-linecap
它控制边框终点的形状，它有三个可能值：
butt用直边结束线段，它是常规做法，线段边界90度垂直于描边的方向、贯穿它的终点。
square的效果差不多，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制。
round表示边框的终点是圆角，圆角的半径也是由stroke-width控制的。
stroke-linejoin
它用来控制两条描边线段之间，用什么方式连接。
它有三个可用的值：
miter是默认值，表示用方形画笔在连接处形成尖角。
round表示用圆角连接，实现平滑效果。
bevel，连接处会形成一个斜接。
stroke-dasharray
它将虚线类型应用在描边上。
<path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
stroke-dasharray属性的参数，是一组用逗号分割的数字组成的数列。每一组数字，第一个用来表示填色区域的长度，第二个用来表示非填色区域的长度。所以在上面的例子里，第二个路径会先做5个像素单位的填色，紧接着是5个空白单位，然后又是5个单位的填色。如果你想要更复杂的虚线模式，你可以定义更多的数字。
其它
另外还有一些关于填充和边框的属性，包括fill-rule，用于定义如何给图形重叠的区域上色；stroke-miterlimit，定义什么情况下绘制或不绘制边框连接的miter效果；还有stroke-dashoffset，定义虚线开始的位置。
3.5.3 使用css
除了定义对象的属性外，你也可以通过CSS来样式化填充和描边。语法和在html里使用CSS一样，只不过你要把background-color、border改成fill和stroke。注意，不是所有的属性都能用CSS来设置。上色和填充的部分一般是可以用CSS来设置的，比如fill，stroke，stroke-dasharray等，但是不包括下面会提到的渐变和图案等功能。另外，width、height，以及路径的命令等等，都不能用css设置。判断它们能不能用CSS设置还是比较容易的。
CSS可以利用style属性插入到元素的行间：
或者利用设置一段样式段落。就像在html里这样的一般放在里，在svg里则放在标签里。表示定义，这里面可以定义一些不会在SVG图形中出现、但是可以被其他元素使用的元素。
<?xml version="1.0" standalone="no"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style type="text/css">
<![CDATA[ #MyRect { stroke: black; fill: red; } ]]>
</style>
</defs>
<rect x="10" height="180" y="10" width="180" id="MyRect"/>
</svg>
四、活用-Icon 图标
我挑选了几组图标，我们按由简入繁的顺序，来看一下，根据前面学到的知识，怎么去实现这些图标。
4.1 向前和向后
这两个图标都是由线条和三角形组成。绘制结果如下图：
实现思路是由直线和折线组合完成绘制，实现代码如下：
<svg width='2em' height='2em'>
<line x1='10' y1='5' x2='10' y2='25' style='stroke: #5f5f5f; stroke-width: 3;'></line>
<polyline points='24 5 10 15 24 25' fill='#5f5f5f'></polyline>{' '}
</svg>
<svg width='2em' height='2em'>
<line x1='23' y1='5' x2='23' y2='25' style='stroke: #5f5f5f; stroke-width: 3;'></line>
<polyline points='7 5 20 15 7 25' fill='#5f5f5f'></polyline>{' '}
</svg>
向前图标，直线起点(10,5)，终点(10,25)，两点的x轴是一样的，所以绘制出来的直线是垂直的。折线，起点(24,5)，第二个点(10，15)，终点(24,25)，这样绘制出来是一个箭头的图形，需要进行颜色填充，使用fill属性控制填充。
向后的图标，直线与折线位置和向前的图标相反，且箭头的方向也相反。
4.2 放大和缩小
这两个图标主要由线条和圆组成。绘制结果如下图：
实现思路是由直线和圆组合完成绘制，实现代码如下：
<svg width='40' height='40'>
<line x1='15' y1='9' x2='15' y2='21' style='stroke: #5f5f5f; stroke-width: 3;'></line>
<line x1='9' y1='15' x2='21' y2='15' style='stroke: #5f5f5f; stroke-width: 3;'></line>
<circle cx='15' cy='15' r='12' fill='transparent' stroke='#5f5f5f' stroke-width='2.5' />
<line x1='24' y1='24' x2='29' y2='29' style='stroke: #5f5f5f; stroke-width: 3;'></line>
</svg>
<svg width='40' height='40'>
<line x1='9' y1='15' x2='21' y2='15' style='stroke: #5f5f5f; stroke-width: 3;'></line>
<circle cx='15' cy='15' r='12' fill='transparent' stroke='#5f5f5f' stroke-width='2.5' />
<line x1='24' y1='24' x2='29' y2='29' style='stroke: #5f5f5f; stroke-width: 3;'></line>
</svg>
放大图标，垂直直线起点(15,9)，终点(15,21)，水平直线起点(9,15)，终点(21,15)，圆的半径r为12，圆心在点(15,15)上，倾斜直线起点(24,24)，终点(29,29)。
缩小图标和放大图标唯一区别是没有垂直直线。
4.3 回到顶部和回到底部
这两个图标主要是由线条和箭头组成。绘制结果如下图：
通过path绘制图形，需要绘制的点更加多，绘制难度会相对较高。
<svg width='2em' height='2em' fill='#5f5f5f'>
<path d='M4 4.2 L 28 4.2 L 28 6 L 4 6Z M16 10.6 L 19.5 15 L 16.7 15 L 16.7 27.5 L 15.3 27.5 L 15.3 15 L 12.5 15Z '></path>
</svg>
<svg width='2em' height='2em' fill='#5f5f5f'>
<path d='M15.3 5.9 L 15.3 18.4 L 12.5 18.4 L 16 22.8 L 19.5 18.4 L 16.7 18.4 L 16.7 5.9Z M4 28 L 4 26.2 L 28.3 26.2 L 28 28Z'></path>
</svg>
正如之前知识点中介绍的，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元素以及它的直线命令的运用也基本掌握了。
4.4 叹号
叹号的绘制，我想介绍另一种方式，那就是通过AI软件绘制的方式。绘制结果如下图：
设计师同事提供给我们的SVG图标，我们可以通过IDE打开查看SVG代码，比如这个叹号图标，它的SVG代码如下：
<svg version='1.1' id='图层_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background: new 0 0 200 200' xml:space='preserve' width='40px' height='40px'>
<path
fill='#5f5f5f'
d='M100,183.86c-15.18,0-29.21-3.74-42.09-11.22s-23.07-17.66-30.55-30.55S16.14,115.18,16.14,100
s3.74-29.21,11.22-42.09s17.66-23.07,30.55-30.55S84.82,16.14,100,16.14s29.21,3.74,42.09,11.22s23.07,17.66,30.55,30.55
s11.22,26.92,11.22,42.09s-3.74,29.21-11.22,42.09s-17.66,23.07-30.55,30.55S115.18,183.86,100,183.86z M100,49.72
c-3.06,0-5.68,1.09-7.86,3.28c-2.18,2.18-3.28,4.8-3.28,7.86c0,3.06,1.09,5.68,3.28,7.86c2.18,2.18,4.8,3.28,7.86,3.28
s5.68-1.09,7.86-3.28c2.18-2.18,3.28-4.8,3.28-7.86c0-3.06-1.09-5.68-3.28-7.86C105.68,50.81,103.06,49.72,100,49.72z M105.57,94.43
c0-3.06-0.55-5.68-1.64-7.86s-2.4-3.28-3.93-3.28c-1.53,0-2.84,1.09-3.93,3.28c-1.09,2.18-1.64,4.8-1.64,7.86l-5.57,50.28
c0,3.06,1.09,5.68,3.28,7.86c2.18,2.18,4.8,3.28,7.86,3.28s5.68-1.09,7.86-3.28c2.18-2.18,3.28-4.8,3.28-7.86L105.57,94.43z'
/>
</svg>
对于复杂的图标，如果绘制上有困难，可以找设计师同事帮忙提供SVG文件。主要考虑到网站对图形绘制质量的要求较高，所以大家可以因地制宜。
五、总结
回归我们的初衷，对于SVG的学习，我们不仅仅要了解它，更重要的是能够将它应用到项目中并解决一些问题。
如果真有一项挑战，比如通过前端代码绘制复杂的SVG图形，我想我会更加有信心去胜任，而不是毫无概念，束手无策。
技术实践的另一个“真理”，多加练习。一起加油，与君共勉。
