SVG矢量绘图 path路径详解（基本画法）

SVG的形状标签里，path是最强大的一个，掌握了path就足够处理常见的绘图问题了。
先看一下path标签的基本用法:

<path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />

 

path标签通过属性d来定义路径，定义信息由一段字符串构成，另外path也可以通过fill和stroke属性来定义填充和边框。

d属性的信息其实并不复杂，由字母和数字构成，数字表示坐标点，字母负责表示如何连接这些坐标点。比如上面的示例中，M表示起点，L表示直线连接，所以d的信息可以这样解读：

 

M100,100    ->    以（100，100）坐标点为起点
L200,200    ->    从（100，100）向（200，200）画一条直线
L200,400    ->    从（200，200）向（200，400）画一条直线

 

在path标签的d属性中，一共有10个命令可以使用，下面5个命令是基础，比较简单。

M     移动到（moveTo）    x,y    开始点坐标
Z    闭合路径（closepath）    将路径的开始和结束点用直线连接
L    直线（lineTo）    x,y    当前节点到指定(x,y)节点，直线连接
H    水平直线    x    保持当前点的y坐标不变，x轴移动到x，形成水平线
V    垂直直线    y    保持当前点的x坐标不变，y轴移动到y，形成垂直线

标准的指令字母是10个，外加1个非标准的，这个可以参见我翻译构建的Snap.svg项目中Paper.path()页面中的表格：

 

命令 名称 参数

M	moveto  移动到	(x y)+
Z	closepath  关闭路径	(none)
L	lineto  画线到	(x y)+
H	horizontal lineto  水平线到	x+
V	vertical lineto  垂直线到	y+
C	curveto  三次贝塞尔曲线到	(x1 y1 x2 y2 x y)+
S	smooth curveto  光滑三次贝塞尔曲线到	(x2 y2 x y)+
Q	quadratic Bézier curveto  二次贝塞尔曲线到	(x1 y1 x y)+
T	smooth quadratic Bézier curveto  光滑二次贝塞尔曲线到	(x y)+
A	elliptical arc  椭圆弧	(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R	Catmull-Rom curveto*  Catmull-Rom曲线	x1 y1 (x y)+

其中，Catmull-Rom曲线不是标准的SVG命令，我们这里不予以讨论!

如果指令字母是大写的，例如M, 则表示坐标位置是绝对位置；如果指令字母小写的，例如m, 则表示坐标位置是相对位置。//zxx: 本文全部使用大写字母做演示和说明。

 

其中，有5个指定属于基本指令，你也可以理解为“好理解好上手好记忆”的指令，见下表：

指令字母（绝对坐标） 中文含义 参数示意 具体说明

M	移动到(moveTo)	x,y	路径起始点坐标
Z	闭合路径(closepath)		将路径的开始和结束点用直线连接
L	直线(lineTo)	x,y	当前节点到指定(x,y)节点，直线连接
H	水平直线	x	保持当前点的y坐标不变，x轴移动到x, 形成水平线
V	垂直直线	y	保持当前点的x坐标不变，y轴移动到y, 形成垂直线

除了这5个参数少、直来直往的指令，剩下的，除了弧形命令A(Arcs)，就都是与贝塞尔曲线相关的命令了。

 

M和L

再看一个M和L的例子

<path d="M30,30 L170,30 L30,170 L170,170"></path>

 

从A点(30,30)开始，直线画向B点(170,30)，再直线到C点(30,170)，再直线到D点(170,170)，最终形成了Z型的路径。

 

填充效果，以及Z

<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>

 

这段路径描述中有两个M，所以就在一个path中，出现了两个相对独立的路径，第一个路径和上面的例子一样，是Z字型。

第二个路径则是一个矩形，描述中出现了Z命令，表示将这段路径的开头和结尾连接起来。
另外，这里我们给路径定义了fill属性，可以看到，无论路径是否闭合，fill都会生效。

 

H和V

最后看一下H和V两个命令，实际上就是在x或y轴不变时，L命令的简写，所以下面两端描述，画出的图是一样的。

<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="yellow"></path>
<path d="M30,30 H170    L30,170 H170     M170,90 H190    V110     H170Z" fill="yellow"></path>

 

 

 

原文：http://xbingoz.com/171.html

转自：SVG矢量绘图 path路径详解（基本画法）