本节我们学习 SVG 中路径，在 SVG 中我们可以使用 <path> 元素来定义路径。<path> 的功能很强大，既可以创建基本的图形，也可以创建更复杂的形状。<path> 路径是由一些命令来控制的，每个命令对应一个字母，字母区分大小写。
SVG中的path命令
<path> 元素可以用于定义路径，元素中有一个 d 属性，这个 d 属性是一系列命令的集合。
<path> 元素中支持下列命令，如果是大写命令表示绝对定位，小写则表示相对定位：
| M | x y | 移动画笔到给定坐标，即起始点 |
| L | x y | 绘制一条到给定坐标的线，可提供多组坐标绘制折线 |
| H | x y | 绘制一条到 x 坐标的横线 |
| V | y | 绘制一条到 y 坐标的竖线 |
| C | x yx1 y1 x2 y2 | 绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为曲线的开始控制点，（x2,y2）为曲线的终点控制点 |
| S | x y x1 y1 | 绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为新端点的控制点 |
| Q | x y x1 y1 | 绘制一条从当前点到（x,y），控制点为（x1,y1）的二次贝塞尔曲线 |
| T | x y | 绘制一条从当前点到（x,y）的二次贝塞尔曲线 |
| A | rx ry x-axis-rotation large-arc-flag sweep-flag x y | 绘制当前点到（x,y）的椭圆弧，椭圆弧的 x，y轴半径分别为 rx,ry。椭圆相对于 x 轴旋转 x-axis-rotation 度。large-arc-flag 等于0表示弧线小于180度，等于1表示弧线大于180度。sweep-flag 等于0 表示弧线逆时针旋转，等于1表示弧线顺时针选装 |
| Z | 闭合路径 |
示例：
例如我们使用路径命令绘制一个矩形：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500" height="500">
<path d="M50 50 L200 50 L200 150 L50 150 Z" style="fill:#f5bf8d;" />
</svg>
</body>
</html>
在浏览器中的演示效果： 其中 M 命令指定了开始点的位置，即左上角 (50,50)，L 命令可以用于绘制一条直线段，这个直线段从当前位置移到指定位置。上述三个 L 位置分别为右上角 (200,50)、右下角 (200,150)、左下角(50,150)。Z 命令为闭合路径命令。
绘制一段弧线
使用 <path> 中的 A 和 a 命令，可以绘制圆弧，使用 A 命令（绝对坐标）作为其端点，a 命令（相对坐标） 作为起点。
示例：
例如下面这个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SVG学习(9xkd.com)</title>
<link rel="styleSheet" type="text/css" href="./style.css">
</head>
<body>
<svg width="500px" height="500px" >
<path d="M50,40 A30,50 0 0,1 100,110" fill="transparent" stroke="green"/>
</svg>
</body>
</html>
在浏览器中的演示效果： 从代码中可以看到，这段弧线的起点为 (50,40)，终点为(100, 110)，圆弧的半径为 A 命令上的前两个参数，即 rx 为30，ry 为 50。A 命令上的第三个参数为 x-axis-rotation， 被设置为了0，第四个 large-arc-flag 的值等于 0 ，这表示弧线小于180度。