SVG Path（路径）
<path>元素是用来画一条闭合直线。
语法
下面是<path>的语法声明，这里只介绍主要的属性。
<path
d="data" >
</path>
属性
| S.N. | 名称和描述 |
|---|---|
| 1 | d - 路径数据，通常是一组命令，例如moveto、lineto等。 |
<path>元素被用来定义任何路径。Path元素使用Path数据，这些数据包含很多命令，这些命令就好像是拿着一支笔在移动画出一条路径。
| S.N. | 命令和描述 |
|---|---|
| 1 | M - moveto - 从一点移到另一点. |
| 2 | L - lineto -创建一条线. |
| 3 | H - horizontal lineto - 创建一条水平线. |
| 4 | V - vertical lineto - 创建一条竖线. |
| 5 | C - curveto - 创建一条曲线. |
| 6 | S - smooth curveto - 创建一条平滑曲线. |
| 7 | Q - quadratic Bezier curve - 创建一个二次贝塞尔曲线. |
| 8 | T - smooth quadratic Bezier curveto - 创建一个平滑二次贝塞尔曲线. |
| 9 | A - elliptical Arc - 创建一个椭圆弧. |
| 10 | Z - closepath - 关闭路径. |
上述命令使用大写字母，代表绝对路径，如果使用小写字母，则使用相对路径。
实例
testSVG.html<html>
<title>SVG路径</title>
<body>
<h1>SVG路径实例</h1>
<svg width="400" height="450">
<g>
<text x="0" y="15" fill="black" >路径 #1: 不透明.</text>
<path d="M 100 50 L 300 50 L 200 200 z"
stroke="black" stroke-width="3" fill="rgb(121,0,121)">
</g>
<g>
<text x="0" y="260" fill="black" >路径 #2: 透明 </text>
<path d="M 100 300 L 300 300 L 200 400 z"
style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);stroke-opacity:0.5;">
</g>
</svg>
</body>
</html>
上面实例中，第一个图，M 100 50 移动画笔到(100,50)，L 300 50 画一条线从(100,50)到(300,50)，L 200 200 画一条线从(300,50)到(200,200)，z 关闭路径。
输出
在Chrome浏览器上打开文件，你能用Chrome/Firefox/Opera或IE9+直接看到SVG图像而不用任何插件，在IE8里需要使用activeX控件才能看SVG图像。
SVG路径实例
实例中，使用了style（样式），这里说下几个样式的含义。fill - 填充颜色，none表示不填充颜色，stroke-width - 图边的宽度 ， stroke - 图边的颜色 ， stroke-opacity - 图边透明度 ， opacity - 图形透明度 。
