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 命令的对称控制点，仅需提供新终点控制点与终点坐标。

办公小浣熊

办公小浣熊是基于商汤大语言模型的原生数据分析产品，

460

查看详情

3、Q x1 y1 x y：以 (x1,y1) 为唯一控制点，绘制至 (x,y) 的二次贝塞尔曲线；T x y 则自动推导控制点并绘制平滑连接。

四、椭圆弧命令 A 的参数解析

A 命令用于绘制椭圆弧段，语法复杂但精确可控。其六个参数依次为：rx ry x-axis-rotation large-arc-flag sweep-flag x y。

1、rx 和 ry 分别指定椭圆的横纵半轴长度，单位与 SVG 坐标系一致。

2、x-axis-rotation 表示椭圆长轴相对于 X 轴的旋转角度（度数），顺时针为正。

3、large-arc-flag（0 或 1）决定选择大弧还是小弧；sweep-flag（0 或 1）决定绘制方向（0=逆时针，1=顺时针）。

4、示例：A 30 20 0 0 1 100 50 表示：半轴 30×20、无旋转、取小弧、顺时针、终点为 (100,50)。

五、闭合与特殊命令

Z（Close Path）命令强制绘制一条直线，从当前点回到该子路径的初始点，完成闭合。它不接受任何参数，且大小写等效。

1、Z 命令会重置当前点为最近一次 M 或 m 的坐标，无论中间经过多少次移动或曲线。

2、Z 后可继续追加其他命令，此时新命令基于闭合后的起点位置执行。

3、Z 不影响 fill 效果的判断逻辑，即使未显式写出，某些渲染引擎仍按视觉闭合处理填充。

以上就是SVG的path路径标签怎么写 SVG路径命令详解的详细内容，更多请关注php中文网其它相关文章！