SVG路径path的d属性怎么写 SVG path绘图教程

SVG的元素通过d属性实现灵活绘图，核心是理解M/L/H/V/Z等基础指令的坐标逻辑及C/Q/A等曲线指令的控制点机制，结合实践验证即可高效手写路径。

SVG 的 <path></path> 是最强大也最灵活的绘图元素，它的核心就是 d 属性——一条由字母和数字组成的“绘图指令字符串”。写对 d，就能画出任意形状；写错一点，图形可能消失或变形。关键不是死记所有命令，而是理解坐标逻辑和常用指令的组合方式。

基础指令：M、L、H、V、Z 最常用

d 属性值是一系列命令（单字母）加参数（数字）的组合，大小写敏感：大写表示绝对坐标，小写表示相对坐标（相对于上一个点）。

• M x y —— “Move to”，把画笔移到起点（不画线）。例如 M 10 20 表示从 (10,20) 开始绘图。
• L x y —— “Line to”，画一条直线到 (x,y)。例如 M 10 10 L 50 10 L 50 50 画出直角折线。
• H x —— 水平线（y 不变），V y —— 垂直线（x 不变）。比写全 L 更简洁。例如 M 0 0 H 100 V 50 H 0 Z 就是一个矩形。
• Z —— 闭合路径，自动连回起点，不需参数。建议每个封闭图形末尾都加 Z（即使视觉上已闭合）。

曲线指令：C、S、Q、T 要分清控制点逻辑

贝塞尔曲线看着复杂，其实就两类：三次（C/S）和二次（Q/T），关键是控制点怎么影响曲线走向。

• C x1 y1 x2 y2 x y：三次贝塞尔，(x1,y1) 是起点控制点，(x2,y2) 是终点控制点，(x,y) 是终点。控制点像“磁铁”拉扯曲线。
• S x2 y2 x y：简写三次曲线，自动镜像前一个 C/S 的终点控制点作为当前起点控制点，适合连续平滑曲线。
• Q x1 y1 x y：二次贝塞尔，只有一个控制点 (x1,y1)，更易上手。弧度比三次更“圆润”。
• T x y：简写二次曲线，自动镜像前一个 Q/T 的控制点，常用于对称曲线段。

小技巧：用在线工具（如 SVG Path Builder 或 Figma 导出）画好形状再看生成的 d 值，比纯手算更快理解控制点关系。

标签： svg 浏览器 编程语言 工具