SVG中国

路径<path>标记是 SVG中最复杂的，它创建最复杂的形状，也是最有用、用的最多的。<path>标记可以实现SVG最基础形状矩形（rect）、圆（circle）、椭圆（ellipse）、线段（line）、折线（polyline）和多边形（polygon）不能实现的形状。

来源：SVG中国(ChinaSVG.COM)

SVG路径<path>语法如下：

<path d="M10 20 L110 20 L110 120 L10 120" style="fill:rgb(0，0，153); fill-opacity:0.5;stroke:rgb(0，0，153);stroke-width:4"/>

用<path>元素生成一个简单的多边形。

路径是一系列命令，用来创建作为图像一部分精确定义的形状。该形状可以是开放的（如线）或闭合的（如多边形），并可以包含一条或多条线、 曲线和线段。

特别是在这两种情况下：第一，当图像需要曲线，它不能由多边形或折线创建，第二，当动画或文本需要沿页面上的特定形状前进时。这就需要路径了。

下面是path标记的 d属性使用的命令，指令解释如下：

M = 移动
L = 画直线
H = 水平画线
V = 垂直画线
C = 画曲线
S = 画平滑曲线
Q = 画贝塞尔曲线
T = 画平滑贝塞尔曲线
A = 画圆弧
Z = 关闭路径的描绘。

注：大写字母说明这些坐标是相对于整个坐标系统的绝对坐标。小写字母命令则指明为相对坐标。

<path> 标记的 d 属性用来描述下面要画的是多类型的形状，M10 20 表示画笔移动到点 10，20，L110 20 表示从当前点画一条线到坐标 110，20等，由于path标记采用的格式很复杂，因此，可以画出很复杂的形状， 下面的语句在浏览器上画一个螺旋线：

<path d="M156 334 C153.239 334 151 334 151 334 C151 339.523 153.239 344 156 344
C164.284 344 171 339.523 171 334 C171 322.954 164.284 314 156 314
C142.193 314 131 322.954 131 334 C131 350.568 142.193 364 156 364
C175.33 364 191 350.568 191 334 C191 311.909 175.33 294 156 294
C131.147 294 111 311.909 111 334 C111 361.614 131.147 384 156 384
C186.375 384 211 361.614 211 334 C211 300.863 186.375 274 156 274"
style="fill:none;stroke:darkgreen;;stroke-width:2"/>

(1) 坐标数据和指令之间的空格可以省略，但坐标致据之间的空格显然不能省略。

(2) 当绘制水平或垂直线段时，可以使用H和V 命令代替 L。使用H或 h 时，后面只需要加一个代表x坐标的参数，Y坐标映省与当前点相同。

同样，使用v或v 时，后面也只需要加一个代表Y坐标的参数。如果这两个命令字母后面跟了多个数值,则每一个数值被认为是一次单独的绘制线条的命令，而不像 L和 1命令那样把每两个数值结合起来作为一个点的一对坐标值来加以处理。

(3)一对坐标值的XY坐标之间可以用空格或逗号隔开，但坐标对与坐标对之间只能用空格作为分隔符。

(4)路径闭合命令虽然也有 Z和 z：两种形式，可效果是一样的，使用时没有区别。

(5) C代表 Curve （贝赛尔曲线控制），C5,45 45,45 45,5 中的点（45,5）表示第 2个点的位置，中间的两点（5,45），（45,45）分别代表前一个点（5,5）和后一个点(45,5)之间的曲柄点的位置。

(6) S和 s命令是绘制”光滑”三次贝塞尔曲线的命令。一条复杂的曲线由多个曲线弧段所构成，弧段与弧段之间要光滑衔接，各个弧段的控制点必须满足一定条件。首先， 这一段曲线弧的起点必须是前一段曲线弧的终点，否则连不上；其次，这一段曲线弧的第一控制点必须与前一段曲线弧的第二控制点呈对称关系，对称中心是这段曲 线弧的起点，只有这样才能保证曲线衔接处的光滑。S和 s命令的语法是”S X2 y2 destx desty”，省略了光滑曲线弧所隐含的第一个控制点的坐标。命令执行完后，当前点坐标同样停留在最后绘制的一段曲线弧的终点上。

(THE END)