svg介绍
可缩放矢量图形（Scalable Vector Graphics，SVG），是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。
svg path标签
path元素是SVG基本形状中最强大的一个,可以用它创建线条, 曲线, 弧形。
一、path常见命令一览
M: Move To
解释：移动画笔到某个坐标点(x, y)
命令：M x y
L: Line To
解释：画线到某个坐标点(x, y)
命令：L x y
H
解释：绘制水平线(x)
命令：H x
v
解释：绘制垂直线(y)
命令：V y
Z
解释：闭合路径，通常用在路径结尾
Q
解释：创建二次贝塞尔曲线(x1,y1）（x2, y2),第一组坐标为控制点坐标，第二组为曲线的终点坐标
命令：Q x1 y1 x2 y2
C
解释：创建三次贝塞尔曲线(x1,y1)（x2, y2) (x, y),第一、二组坐标为控制点坐标，第三组为曲线的终点坐标
命令：C x1 y1 x2 y2 x y
二、实战演示
（1）绘制一条直线
<path
stroke="#868686"
strokeOpacity="1" fill="none"
pointerEvents="visibleStroke"
fillOpacity="1"
className={`line selected`}
style={{ strokeWidth: 0.8 }}
d="M 200 200 L 500 200"></path>
效果如下
（2）绘制多段折线
<path
stroke="#868686"
strokeOpacity="1" fill="none"
pointerEvents="visibleStroke"
fillOpacity="1"
className={`line selected`}
style={{ strokeWidth: 0.8 }}
d="M 200 200 L 500 200 L 300 300 L 400 400"></path>
效果如下
（3）绘制二次贝塞尔曲线
之前我们有说到二次贝塞尔用Q命令来创建，参数为两组坐标，第一组为控制点，第二组为曲线终点，所以二次贝塞尔曲线命令为：
贴一张对于二次贝塞尔曲线的描述图，以便于大家理解：
具体实现：
<path
stroke="#868686"
strokeOpacity="1" fill="none"
pointerEvents="visibleStroke"
fillOpacity="1"
className={`line selected`}
style={{ strokeWidth: 0.8 }}
d="M 200 200 Q 350 500 500 200"></path>
效果如下：
（4）绘制三次贝塞尔曲线
之前我们也有说到三次贝塞尔用C命令来创建，参数为三组坐标，第一、二组为控制点，第三组为曲线终点，所以三次贝塞尔曲线命令为：
贴一张对于三次贝塞尔曲线的描述图，以便于大家理解：
具体实现：
<path
stroke="#868686"
strokeOpacity="1" fill="none"
pointerEvents="visibleStroke"
fillOpacity="1"
className={`line selected`}
style={{ strokeWidth: 0.8 }}
d="M 300 400 C 320 450 380 450 400 300"></path>
效果如下：
总结&后续
至此，我们就很简单的学会了svg绘制直线和曲线的基本操作，很多同学看到这可能会觉得so easy。but!! 实战运用才是最重要的，在运用中我们不光要学会使用正确的命令，更重要的是里面的计算。我们在很多地方都能看到类型的demo，比如大家常用的process流程图，连线就是使用的svg。
下面是我基于react框架+svg实现的demo
主要功能点：
- 节点可拖拽生成、移动、删除
- 两节点可连线，连线可选中、删除
- 双击组件编辑
- 整个流程的初始化和保存
本文就讲到这了，后续还会继续更新该demo的分享，其中还有很多细节点，欢迎大家一起讨论。
