SVG path

　　在网页上画一图形，好比星星或波浪线，开始是想着图形软件画一个的，后来发现SVG这绘图程序的语言，感受甚是能够，就发了些时间学了一下，在此作一简单分享和记录。

菜鸟上是这么介绍的（SVG 是使用 XML 来描述二维图形和绘图程序的语言。SVG 指可伸缩矢量图形 (Scalable Vector Graphics)，SVG 图像在放大或改变尺寸的状况下其图形质量不会有所损失，SVG 是万维网联盟的标准。。。。）

　　并且SVG 文件可经过<embed>、<object> 或者 <iframe>标签嵌入 HTML 文档。也能够直接嵌入到HTML页面中，或您能够直接连接到SVG文件。反正使用起来仍是挺方便的 ，只要浏览器支持，推荐浏览器能支持HTML5的使用。 

　　SVG确是很强大，可以绘制各类基本图形（矩形、圆、椭圆、多边形、曲线、路径、文本等），还有各类滤镜、模糊效果、阴影、渐变等特效。而后其中的路径path它不只能建立其余基本形状，还能建立更多复杂形状（抛物线、波浪线.....甚至all）。反正path又是SVG里强大的一个，因此这里单独来讨论path。

---

　　path中存在不少命令来定义路径形式和路径数据。可大体分为直线命令和曲线命令

直线命令

M = moveto

　　字母“M”表示的是“Move to”命令，当解析器读到这个命令时，它就知道你是打算移动到某个点。跟在命令字母后面的，是你须要移动到的那个点的x和y轴坐标。好比移动到(10,10)这个点的命令，应该写成“M 10 10”。这一段字符结束后，解析器就会去读下一段命令。由于M命令仅仅是移动画笔，但不画线。因此M命令常常出如今路径的开始处，用来指明从何处开始画。好比：

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10"/>

</svg>

这样是看不到任何图像的，由于这样只是把画笔移动到了x-10px,y-10px处。须要画出东西得在后面跟上其余画图命令以下面介绍到的命令。

注：每个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位。另外一种是用小写字母，表示采用相对定位，（例如：从上一个点开始，向上移动10px，向左移动7px）path元素的形状是经过属性d定义的，由于属性d采用的是用户坐标系统，因此不需标明单位。

L = lineto

　　字母“L”表示的是“line to”命令，L须要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。这里就一块儿把“H”和“V”两个命令一块儿介绍了，

• H = horizontal lineto ——绘制平行线。
• V = vertical lineto ——绘制垂直线。

这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，由于它们都只在坐标轴的一个方向上移动。好比，绘制平行线只须要肯定x轴（H x），绘制垂直线只需肯定y轴 ( V x )。

如今来整理以上命令绘制一个简单的矩形（固然SVG中有专门的 矩形命令<rect/>）。

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  
  <path d="M10 10 H 100 V 100 H 10 L 10 10" stroke="black"/>

</svg>

上述路径是：画笔移动到(10,10)点，由此开始，向右移动90像素构成一条水平线，而后向下移动90像素，而后向左移动90像素，而后再向上移动100再回到起点。

Z = closepath

　　“Z”命令为路径闭合命令，Z命令会从当前点画一条直线到路径的起点，尽管咱们不老是须要闭合路径，可是它仍是常常被放到路径的最后。另外，Z命令不用区分大小写。

而后实际上上面的例子咱们能够优化为

<path d="M10 10 H 100 V 100 H 10 Z" stroke="black" fill="transparent"/>

　　注：stroke：路径颜色，fill：闭合路径的填充颜色，stroke-width：路径宽度

曲线命令

　　绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，最后一个用来绘制弧形或者说是圆的一部分（主要介绍C、S，A圆弧曲线这里将不予讨论）。

• C = curveto
• Q = quadratic Bézier curve
• A = elliptical Arc

　　C 和 Q 是用来绘制贝塞尔曲线的，“贝塞尔曲线”是什么？这东西老难解释了，在这实际上也用不着深刻研究，若是有兴趣能够阅读这份Wikipedia的文档。贝塞尔曲线的类型有不少（线性贝塞尔曲线、二次方贝塞尔曲线、三次方贝塞尔曲线、四次方贝塞尔曲线、五次方贝塞尔曲线、……。），可是在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q。

三次贝塞尔曲线C：

C x1 y1, x2 y2, x y 

<path d="M10 10 C 30 50, 100 60, 200 10" stroke="black" fill="transparent"/>

x1 y1, x2 y2 是两个控制点，x y 为曲线终点，这里盗一下图：

是否是很熟悉，在ps中绘制曲线的钢笔工具绘制的实际上就是“贝塞尔曲线”。

是否是多条三次贝塞尔曲线组合在一块儿能够获得一条很长的变化莫测的（^-<）平滑曲线，确实。但那是否是描点很麻烦，确实，因此 出现了S ( smooth curveto)命令，S命令能够用来建立与以前那些曲线同样的贝塞尔曲线，

可是，若是S命令跟在一个C命令或者另外一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。若是S命令单独使用，前面没有C命令或者另外一个S命令，

那么它的两个控制点就会被假设为同一个点，变成了二次贝塞尔曲线。

 

（MDN 贝塞尔曲线示意图）。

<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"> ,M10 80 肯定了画笔起点，C 后跟了两个控制点坐标，这时已经完成了一条三次贝塞尔曲线了，而后当咱们须要再次绘制一条链接第一条曲线的

贝塞尔曲线时，跟上S命令后只需给出第二条三次贝塞尔曲线的第二个控制点的坐标便可（S指令会自动补出第一个控制点与第二个控制点对称 [蓝色部分]）,因而就能够绘制出一条完美的平滑曲线了。

C指令有三个坐标参数，而S指令自动对称一个控制点，所以，跟在C指令以后的S指令，只须要2个参数，以下：

S x2 y2, x y

 另外一种可用的贝塞尔曲线是二次贝塞尔曲线Q，它比三次贝塞尔曲线简单，只须要肯定一个控制点和一个终点便可（固然还有起点）。

<path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>

以下图：

A和C分别是起点和终点，B是控制点，其指令和参数为：

Q x1 y1, x y

一样，Q二次贝塞尔曲线也存在一简化连续绘制平滑曲线的命令，他就是T (smooth quadratic Bézier curveto)。

T会经过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，能够只定义终点，就建立出一个至关复杂的曲线。须要注意的是，T命令前面必须是一个Q命令，

或者是另外一个T命令，才能达到这种效果。若是T单独使用，那么控制点就会被认为和终点是同一个点，因此画出来的将是一条直线。继续上MDN示意图：

下面蓝色的控制点就是T命令自动补上的。

<path d="M10 80 Q 185 10, 360 80 T 720 80" stroke="black" fill="transparent"/>
<path d="M10 80 Q 95 10,185 80 T 360 80" stroke="black" fill="transparent"/>
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>

　　　　　　　　　　　　　　　　　　　　　　　　（效果图）

 

 虽然二次贝塞尔曲线绘制比较三次贝塞尔曲线简单，但三次贝塞尔曲线拥有更大的自由度，具体使用哪一种曲线，一般取决于需求，以及对曲线对称性的依赖程度。

 

 最后附上一张绘制前的草图

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 210 0 ,400 80 T 800 80 T 1200 80 T 1600 80" stroke="black" fill="transparent">
</svg>

画笔由原点向下移动了80px向左移动了10px，而后绘制了第一条二次贝塞尔曲线紧接着使用T指令绘制了第二条第三条第四条……，一条很长的波浪线就横空出世了。

 

SVG绘制的为矢量图，我感到最大的好处是能够动态的改变图形的形状和颜色，用来做动画真的太赞了（像我这种绘画艺术细菌为零的程序猿）。

 

 参考文章：

深度掌握SVG路径path的贝塞尔曲线指令

路径