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>

Snip20150708_1

从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>

Snip20150708_2

这段路径描述中有两个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>

Snip20150708_3

 

转自:http://xbingoz.com/171.html

 

更多参考:

SVG动画入门

SVG动画入门(二)

SVG技术入门:线条动画实现原理

如何使用CSS来修改SVG原点和制作SVG动画

纯CSS实现帅气的SVG路径描边动画效果

SVG矢量绘图 path路径详解(基本画法)

SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)

Web流程图绘制使用raphael

本文:SVG矢量绘图 path路径详解(基本画法)