SVG之旅（二）

这一章主要是讲解基本元素中比较复杂的元素path。

一、可用指令

M = moveto 起点

L = lineto 直线

H = horizontal lineto 水平线

V = vertical lineto 垂直线

C = curveto 曲线

S = smooth curveto 平滑曲线

Q = quadratic Bézier curve 二次贝塞尔曲线

T = smooth quadratic Bézier curveto 光滑的二次贝塞尔曲线

A = elliptical Arc 椭圆弧

Z = closepath 关闭路径

以上指令都可大小写，大写表示绝对位置，小写表示相对位置

二、应用

直线

案例一：任意直线

    M L（大写） / m l （小写）

    大写表示绝对位置，小写表示相对位置

    d：路径的点

案例二：横向直线  

    H （大写）/  h（小写） (horizontal )

案例三：垂直直线

    V （大写）/ v （小写）（vertical ）

案例四：连接起点 

    （常用在需要画封闭的图形中）

    Z （大写）/  z （小写） （closepath）

    如图所示：画一个封闭的矩形

    起点10 10，水平移动100，垂直移动100，水平负方向移动100，结束。

曲线

path元素中有两种曲线：贝塞尔曲线（三次贝塞尔曲线C、二次贝塞尔曲线Q）、弧线

案例五：贝塞尔曲线  - -  三次贝塞尔曲线C

三次贝塞尔曲线需要三个点：C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)，（x1 y1）为起点控制点，（ x2 y2）为终点控制点，（x2 y2）为终点。

尤其画曲线的时候不好控制显得弯曲程度和方先通常我都是用一些工具来处理的，比如说Method Draw（https://c.runoob.com/more/svgeditor/），操作方式也很简单左侧选择图形，中间鼠标左键按住拖动画图，右侧调整css参数，ctrl+u查看代码，复制粘贴到你的项目 就好啦。

案例六：贝塞尔曲线  - - 二次贝塞尔曲线Q

二次贝塞尔曲线需要两个点： Q x1 y1, x y (or q dx1 dy1, dx dy)， (x1 y1) 为控制点，确定起点终点的斜率，(x y)为终点。

案例七：

案例八：