HTML svg 之＜path＞使用
<path> 元素用于定义一个路径。
一、命令
下面的命令可用于路径数据：
| 命令 | 字母示意 | 描述(小写表示相对于上个坐标的位移,相对路径) |
|---|---|---|
| M(m) x y | moveto | 移动到(x,y) |
| L(l) x y | lineto | 画一条直线到(x,y) |
| H(h) x | horizontal lineto | 水平画一条直线到 X |
| v(v) y | vertical lineto | 竖直画一条直线到 y |
| A(a) rx ry x-axis-rotation large-arc sweep x y |
elliptical Arc | 画一段到(x,y)的椭圆弧.圆弧的 x, y 轴半径分别为 rx,ry, 圆相对于X轴旋转x-axis-rotation 度 large-arc=0表明弧线小于180读,large-arc=1表示弧线大于180度,sweep=0表明弧线逆时针旋转,sweep=1表明弧线顺时间旋转 |
| Q(q) cx cy x y | quadratic Bézier curve | 从当前点画一条到(x,y的二次贝塞尔曲线,曲线的控制点为(cx,cy) |
| T(t) x y | smooth quadratic Bézier curveto | 此命令只能跟在一个Q 命令使用,假设 Q 命令生成曲线 s,T 命令的作用是从 s 的终点再画一条到(x y的二次贝塞尔曲线，曲线的控制点为 s 控制点关于s 终点的对称点。T命令生成的曲线会非常平滑 |
| C(c) cx1 cy1 cx2 cy2 x y | curveto | 从当前点画一条到(x,y的三次贝塞尔曲线,曲线的开始控制点和终点控制点分别为(cx1,cy1),(cx2,cy2)。 |
| s(s) cx2 cy2 x y | smooth curveto | 此命令只能跟在 C 命令后使用,假设 C 命令生成曲线 s,S 命的作用是再画一条到( x,y)的三次贝塞尔曲线,曲线的终点控制点是(cx2,cy2),曲线的开始控制点是 s 的终点控制点关于s终点的对称点 |
| Z | closepath | 放在path最后，表示闭合路径 |
注意：1）以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
2）表格中深色框命令为常用命令。
二、使用
使用语法：<path d=" M x1 y1 L x2 y2 H x3.... " stroke="red"></path>
d：引出路径，d 中的值由多条命令组合而成。
eg1：使用 path 绘制一条直线、半圆、直线，连接起来形成一个拱桥，代码如下（使用请删除每行注释）：
<svg version="1.1" height="400" width="550"><path d="M 0 100 //（0，100）是起点，在坐标轴中相当于（0，-100）L 100 100 // 画一条直接到 (100,100)A 100 100 0 1 1 300 100 // 画一段圆弧，圆弧的 x轴半径100, y轴半径100, 圆相对于X轴旋转0度 large-arc=1表示弧线大于180度,sweep=1表明弧线顺时间旋转，圆弧所到达的终点x为300 y为100 L 400 100 //画一条直线到 (400,100)
" stroke="black" stroke-width="1" fill="none"></path>
</svg>运行结果如下：
图形分析：
eg2：使用 path 绘制一个实心三角形，代码如下：
<svg version="1.1" height="400" width="550"><path d="M150 0 L75 200 L225 200 Z" style="fill:blue;stroke:red;stroke-width:2"/>
</svg>运行结果如下：
代码解析：其中Z表示路径闭合。style为设置路径样式。
属性说明:
stroke : 边框颜色
stroke-width: 边框粗细
fill: 填充颜色