svg
基于可缩放矢量图形（Scalable Vector Graphics，SVG）基于 XML 标记语言，用于描述二维的矢量图形。
SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。
和传统的点阵图像模式（如 JPEG 和 PNG）不同的是，SVG 格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真或降低质量，并且可以方便地修改内容，无需图形编辑器。通过使用合适的库进行配合，SVG 文件甚至可以随时进行本地化。
为什么要学习 svg?
目前前端很多的可视化功能都需要通过 svg 或者 canvas 来实现，而本人对于 svg 一直有种恐惧的心态，觉得很深奥，很神秘，不知道如何下手
为了更好的知道这些可视化的框架的底层原理，所以掌握 svg 的基础知识，学会绘制各种图形，要是加上各种动画和交互就更好了
基础图形
rect
绘制一个矩形，可以使用 rect 元素
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"
rx="4" ry="4" />
属性解释：
- x-矩形左上角的x位置
- y-矩形左上角的y位置
- width: 矩形的宽度
- height：矩形的高度
- stroke： 边框的填充色
- stroke-width： 边框的宽度
- fill：矩形内容的填充色
- rx：圆角的x方位的半径
- ry：圆角的y方位的半径
circle
绘制一个圆形，可以使用 circle 元素
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5" />
属性解释：
- r：圆的半径
- cx：圆心的x位置
- cy：圆心的y位置
- stroke：边框的填充色
- stroke-width：边框的宽度
- fill：内容填充色
ellipse
绘制一个椭圆，可以使用 ellipse 元素
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5" />
属性解释：
- rx：椭圆的x半径
- ry：椭圆的y半径
- cx：椭圆中心的x位置
- cy：椭圆中心的y位置
- stroke：边框的填充色
- stroke-width：边框的宽度
- fill：内容填充色
line
绘制一条直线，可以使用 line 元素
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5" />
属性解释：
- x1：起点的x位置
- y1：起点的y位置
- x2：终点的x位置
- y2：终点的y位置
- stroke：边框的填充色
- stroke-width：边框的宽度
polyline
绘制一条折线，可以使用 polyline
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="green" fill="transparent" stroke-width="5" />
属性解释：
- points：点集合，每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含2个数字，一个x坐标，一个y坐标，所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。
- stroke：边框的填充色
- stroke-width：边框的宽度
- fill：内容填充色
polygon
绘制一个多变形，可以使用 polygon
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5" />
属性解释：
- polygon 的路径在最后一个点处自动回到第一个点，需要注意的是，矩形也是一种多边形，如果需要多灵活的话，可以使用多边型来创建一个矩形
- points：点集合。每个数字可以空白符、逗号、终止命令或者换行符分隔开。一个是x坐标，一个是y坐标
最强大的元素
path
元素是 SVG 基本形状中最强大的一个。你可以用它创建线条，曲线，弧形等等。
另外，path 只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然polyline元素也能实现类似的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），并且这种做法不能够放大（放大后，点的离散更明显）。所以在绘制 SVG 时，对路径的良好理解很重要。虽然不建议使用 XML 编辑器或文本编辑器创建复杂的路径，但了解它们的工作方式将有助于识别和修复 SVG 中的显示问题。
path 只需要设定很少的点，就可以创建平滑的线条 path 元素的形状是通过属性 d 定义的，属性 d 的值是一个“命令 + 参数”的序列
字母"M"表示“Move To”，当解析器读到这里就知道你打算移动到某个点，比如要移动到（10,10），可以写成 "M10 10" 每一个命令都有两种表示方式，一种是大写字母，一种是小写字母，前者是绝对定位，后者是相对定位
当使用小写字母命令时（也就是使用相对位置），记得后面的 x，y 坐标需要加上上一个点的 x，y 坐标，才等于新的 x，y 的绝对位置坐标。比如
```svg
```
上面的意思是：从 (0, 0) 开始，接着 l 20 0 代表真正移动的坐标是 (20, 0)，它是由当前的坐标加上移动的坐标得出 (0+20, 0+0)，然后 l 0 20 得到的真正的坐标 (20,20)，它由当前的坐标加上移动的坐标得出 (20+0,0+20)，然后 l -20 -20 得到的真正的坐标是 (0, 20)，它由当前的坐标加上移动的坐标得出 (20+-20,0+-20)，Z 把当前点与起点连接起来
等于是画一个矩形的形状
介绍 path 里面的属性命令：
- M 表示“Move To”，只是移动画笔
- L 表示“Line To”，需要两个参数，一个是x轴的坐标，一个是 y 轴的坐标
- H 表示“绘制水平线”，y 轴不变，只移动 x 的坐标位置
- V 表示“绘制垂直线”，x 轴不变，只移动 y 的坐标位置
- Z 来闭合路径，Z命令会从当前点画一条直线到路径的起点，尽管不总是需要闭合路径，但是它还是经常被放到路径的最后
- C 表示三次贝塞尔曲线，定义一个点和两个控制点 C x1 y1, x2 y2, x y (x,y)代表的是曲线的终点，另外两个是控制点，(x1, y1) 是起点的控制点, (x2, y2)是终点的控制点
- S 命令可以创建一样的曲线，S命令跟在一个 C 或者 S 命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点，否者被当做第一个控制点
- Q 另一个可用的贝塞尔曲线是 Q，它比三次贝塞尔曲线简单，只需要控制一个点，用来确定起点和终点的曲线斜率。因此，需要两组参数，控制点和终点的坐标
- T 二次贝塞尔曲线有一个差不多的命令T，可以更简短参数，延长二次贝塞尔曲线，T会通过前一个控制点，推断一个新的控制点。意味着，在第一个控制点后面，可以只定义终点，就可以创建一个相当复杂的曲线，需要注意的是，T命令前面必须是Q命令，或者另外一个T 命令，才能达成这种效果
- A 弧形 视为圆形或者椭圆形的一部分。命令 A rx ry x-axis-rotation large-arc-flag sweep-flag x y，rx x轴方向的半径，ry y轴方向上的半径，large-arc-flag（角度大小）和 sweep-flag（弧线方向） large-arc-flag 决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。sweep-flag表示弧线的方向，0表示从起点到终点逆时针画弧，1表示从起点到终点沿顺时针画弧
使用 path 绘制一条直线
```svg
```
解释：属性 d 是用来定义 path 形状的，M 10 10 表示起点是(10,10)，H 90 表示在 x 轴往右移动 90，对应的坐标应该是 (90,10)，y坐标跟起点的 y 坐标一致，等于是 (10,10) -> (90,10) 绘制了一条长度为 80 的直线
使用 path 绘制三次贝塞尔曲线(使用 C 命令)
```svg
```
解释：起点是 (10,10)， C 20 20, 40 20, 50 10 代表要绘制一条曲线，其中 (20,20) 是起点控制点，（50,10）是终点，(40,20) 是终点控制点
使用 path 绘制二次贝塞尔曲线（使用 Q 命令）
```svg
```
解释：起点是 (10,80)，Q 95 10 180 180 代表要绘制二次贝塞尔曲线，其中(180，180)是终点，(95,10) 是控制点
使用 path 延长二次贝塞尔曲线（使用 T 命令）
```svg
```
解释：前面的命令都跟 Q 命令的一致，T命令是为了延长曲线
使用 path 来绘制弧形
```svg
```
解释：起点是 (10,315)，L 110 215 表示 line to (110,215)，A 30 50 0 0 1 162.55 162.45 表示画一个弧形，依次解释为 x 轴半径是 30，y 轴半径是 50，0 表示旋转角度，0 表示小角度弧，1顺时针绘制弧线，终点是(162.55,162.45)，后面的跟之前的解释类似