文稿教程路径-mdn.pdfVIP

2015/11/14路径-SVG|

路径

«上一页下一页»

如上一章所说，path元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建其他形

状。

另外，path只需要设定很少的点，就可以创建平滑流畅的线条（比如曲线）。虽然polyline元素也能实现类似

的效果，但是必须设置大量的点（点越密集，越接近连续，看起来越平滑流畅），并且这种做法不能够放大（放

大后，点的离散更明显）。所以在绘制SVG时，对路径的良好理解很重要。虽然用XML或文本编辑器来编辑path

元素不是很容易，但可以帮助我们理解path是如何工作的，所以，你就忍了吧。

上一章提到过，path元素的形状是通过属性d定义的，属性d的值是一个“命令+参数”的序列，讲解这些可

用令，并且展示一些示例。

每一个命令都用一个关键字母来表示，比如，字母“M”表示的是“Moveto”命令，当解析器读到这个命令时，它就

知道你是打算移动到某个点。跟在命令字母后面的，是你需要移动到的那个点的x和y轴坐标。比如移动到(10,10)

这个点令，应该写成“M1010”。这一段字符结束后，解析器就会去读下一段命令。每一个命令都有两种表示

方式，一种是用大写字母，表示采用绝对定位。另一种是用小写字母，表示采用相对定位（例如：从上一个点开

始，向上移动10px，向左移动7px）。

因为属性d采用的是用户坐标系统，所以不需标明单位。在后面的中，我们会学到如何让变换路径，以满足

需求。

直线命令

path元素里有5个画直线令，顾名思义，直线命令就是在两个点之间画直线。首先是“Moveto”命令，M，

前面已经提到过，它需要两个参数，分别是需要移动到的点的x轴和y轴的坐标。假设，你的画笔当前位于一个

点，在使用M命令移动画笔后，只会移动画笔，但不会在两点之间画线。因为M命令仅仅是移动画笔，但不画

线。所以M命令经常出现在路径的开始处，用来指明从何处开始画。

1Mxy

或

1/7

2015/11/14路径-SVG|

1mdxdy

这有一个比较好的例子，不过我们没画任何东西，只是将画笔移动到路径的起点，所以我们不会看到任何图案。

但是，我把我们移动到的点标注出来了，所以在下面的例子里会看到(10,10)坐标上有一个点。注意，如果只画

path，这里什么都不会显示。（这段不太好理解，说明一下：为了更好地展示路径，下面的所有例子里，在用

path绘制路径的同时，也会用circle标注路径上的点。）

1?xmlversion=1.0standalone=no?

2

3svgwidth=200pxheight=200pxversion=1.1xmlns=

4

5pathd=M1010/

6

7!--Points--

8circlecx=10cy=10r=2fill=red/

9

10/svg

能够真正画出线令有三个（M命令是移动画笔位置，但是不画线），最常用的是“Lineto”命令，L，L需要两

个参数，分别是一个点的x轴和y轴坐标，L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线

段。

1Lxy(orldxdy)

另外还有两个简写命令，用来绘制平行线和垂直线。H，绘制平行线。V，绘制垂直线。这两个命令都只带一个参

数，标明在x轴或y轴移动到的位置，因为它们都只在坐标轴的一个方向上移动。

1Hx(orhdx)

2Vy(orvdy)

现在我们已经掌握了一些命令，可以开始画一些东西了。先从简单的地方开始，画一个简单的矩形（同样的效果

用rect/元素可以更简单的实现），矩