SVG 直线命令

　　path元素里有5个画直线的命令，顾名思义，直线命令就是在两个点之间画直线。首先是“Move to”命令，M，前面已经提到过，它需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。假设，你的画笔当前位于一个点，在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。因为M命令仅仅是移动画笔，但不画线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。

　　为了更好地展示路径，下面的所有例子里，在用path绘制路径的同时，也会用circle标注路径上的点。

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10"/>
  <!-- Points -->
  <circle cx="10" cy="10" r="2" fill="red"/>
</svg>

　　能够真正画出线的命令有三个（M命令是移动画笔位置，但是不画线），最常用的是“Line to”命令，L，L需要两个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。

L x y (or l dx dy)

　　另外还有两个简写命令，用来绘制平行线和垂直线。H，绘制平行线。V，绘制垂直线。这两个命令都只带一个参数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。

H x (or h dx)
 V y (or v dy)

　　最后，我们可以通过一个“闭合路径命令”Z来简化上面的path，Z命令会从当前点画一条直线到路径的起点，尽管我们不总是需要闭合路径，但是它还是经常被放到路径的最后。另外，Z命令不用区分大小写。

Z (or z)

画一个80*80的正方形实例

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

移动画笔到（10，10）位置出发，绘制水平线到指定的 90 位置，绘制竖直线到指定的 90 位置 ，绘制水平线到指定的 10 位置，闭合路径（回到原点）。