svg的path命令说明

发布时间 2023-08-18 16:23:29作者: 看风景就
命令名称参数
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)+

值得一提的是S和T命令:

C x1 y1, x2 y2, x y
S x2 y2, x y  绘制 光滑三次贝塞尔曲线,所谓光滑,是指其与其他指令配合,生成前弧形的对称镜像

其第一个控制点是上一个弧形的控制点2的对称点,故省略,相当于简化版的C,即简化版的三次贝塞尔
S指令与C指令配合,即 CS,则S生成与C对称的弧形
S指令与S指令配合,即 SS,则S生成与之前S对称的弧形
S指令单独出现,自动降级为二次贝塞尔曲线

 

Q x1 y1, x y
T x y  绘制 光滑二次贝塞尔曲线,所谓光滑,是指其与其他指令配合,生成前弧形的对称镜像

其第一个控制点是上一个弧形的控制点的对称点,故省略,相当于简化版的Q,即简化版的二次贝塞尔
T指令与Q指令配合,即 QT,则T生成与Q对称的弧形
T指令与T指令配合,即 TT,则T生成与之前T对称的弧形
T指令单独出现,自动降级为直线

 

 

 

出处:深度掌握SVG路径path的贝塞尔曲线指令