SVG的path路径标签怎么写 SVG路径命令详解

SVG 标签通过 d 属性中的命令（如 M/L/Z/C/Q/A 等）定义矢量路径，大小写区分绝对/相对坐标，支持直线、贝塞尔曲线、椭圆弧及闭合路径。

SVG 的 标签是矢量图形中最灵活、功能最强大的绘图元素，它通过一系列命令和坐标参数定义形状轮廓。以下是 SVG 路径命令的详细写法与含义说明：

一、path 标签基本结构

标签必须包含 d 属性，该属性由字母命令与数值坐标组成，构成路径指令序列。所有命令不区分大小写，但大小写含义不同：小写为相对坐标，大写为绝对坐标。

1、 是一个合法的最小完整路径，表示从 (10,10) 移动到 (50,50) 再闭合。

2、d 属性值中空格、逗号、换行均可作为分隔符，但推荐统一使用空格提高可读性。

3、路径命令后若未指定足够参数，浏览器将忽略后续无效部分，不报错但可能渲染异常。

二、移动与直线命令

M（Move To）用于设置起始点，L（Line To）绘制直线段，两者均支持绝对与相对形式。M 后可接多组坐标以定义多个子路径起点。

1、M 20 30 表示将画笔移动到绝对坐标 (20,30)；m 10 5 表示从当前位置向右移 10、向下移 5。

2、L 40 60 70 90 表示依次绘制两条线段：(20,30)→(40,60)→(70,90)；l 5 -10 15 0 表示连续相对位移。

3、H 和 V 是水平/垂直线快捷命令：H 80 等价于 L 80 y_current；v -20 等价于 l 0 -20。

三、曲线命令详解

C（三次贝塞尔）、S（平滑三次贝塞尔）、Q（二次贝塞尔）、T（平滑二次贝塞尔）、A（椭圆弧）用于绘制各类曲线。每种命令需严格匹配参数数量与语义逻辑。

1、C x1 y1 x2 y2 x y：以 (x1,y1) 为起点控制点、(x2,y2) 为终点控制点，绘制至 (x,y) 的三次贝塞尔曲线。

2、S x2 y2 x y：隐式复用前一个 C/S 命令的对称控制点，仅需提供新终点控制点与终点坐标。

标签： svg 浏览器