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）画⼀条直线svg图
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个⾮标准的，这个可以参见我翻译构建的中页⾯中的表格：
命令名称参数
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曲线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>
转⾃：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。