学习 SVG（三）—— 路径

[YIXUNFE]

学习 SVG（三）—— 路径

我们已经在本系列的第一篇文章中介绍了 SVG 中的一些基本形状，现在我们一起来学习一下路径元素 path 的一些知识。

path 元素中的命令

命令	参数	效果
M m	x y	移动到给定坐标
L l	x y	绘制一条直线。可以使用多组坐标来绘制折线
H h	x	绘制一条水平线
V v	y	绘制一条垂直线
A a	rx ry x-axis-rotation large-arc sweep x y	绘制一个从当前点到 (x, y) 的椭圆弧。椭圆上的 x 半径为 rx，y 半径为 ry。椭圆旋转 ry x-axis-rotation 度。如果圆弧小于 180 度，则 large-arc 为 0；如果大于 180 度，则 lager-arc 为 1。如果圆弧按顺时针方向绘制，则 sweep 为 1，否则为 0
Q q	x1 y1 x y	绘制一条从当前点到 (x, y)，控制点为 (x1, y1) 的二次贝塞尔曲线
T t	x y	绘制一条从当前点到 (x, y) 的二次贝塞尔曲线。控制点是前一个 Q 命令的控制点的中心对称点。如果没有前一条曲线，当前点会被用作控制点
C c	x1 y1 x2 y2 x y	绘制一条从当前点到 (x, y) 的三次贝塞尔曲线，(x1, y1) 为曲线的开始控制点，(x2, y2) 为曲线的终点控制点
S s	x2 y2 x y	绘制一条从当前点到 (x, y) 的三次贝塞尔曲线，使用 (x2, y2) 作为新端点的控制点。第一个控制点是前一个 C 命令的终点控制点的中心对称点。如果前一个曲线不存在，当前点会被用作第一个控制点
Z z	关闭路径，启动子路径

path 元素中有一个 d 属性，我们在该属性中描述路径。

<path d="M..." />

命令大小写的区别

命令都有大小写形式，大写表示使用绝对坐标，小写表示使用相对坐标。比如 M 10 0 L 30 30 表示从当前点画一条到 (30， 30) 的直线，而 M 10 0 l 30 30 表示从当前点绘制一条到 (40, 30) 的直线。命令中 M 和 Z 命令的大小写效果相同。

快捷表示法

所有不必要的空白都可以删除，命令和字母之间不需要空白：

<path d="M 10 0 L 30 30 Z" />

//简化后
<path d="M10 0L30 30Z" />

正数与负数之间不需要空格

<path d="M 100 100 l 30 -30 Z" />

//简化后
<path d="M100 100l30-30Z" />

lineTo 命令可以被省略

<path d="M 100 100 L 30 30 L 50 100 L 40 10 Z" />

//简化后
<path d="M100 100 30 30 50 100 40 10Z" />

//相对坐标的例子
<path d="m 100 100 l 30 30 l 50 100 l 40 10 Z" />

//简化后
<path d="m100 100 30 30 50 100 40 10Z" />

需要注意的是，上面例子中的 lineTo 命令的省略会根据 moveTo 命令的大小写判断第一组（绝对）坐标后面的数字对是绝对坐标还是相对坐标。

利用简化标记

<path d="M 100 100 L 100 200 Z" />

//简化后
<path d="M100 100V200Z" />

上面的例子中我们使用了 V 命令绘制了一条垂直线。

参考：

• 《精通SVG》

Thanks