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

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

SVG 的 是最强大也最灵活的绘图元素，它的核心就是 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 值，比纯手算更快理解控制点关系。

弧线 A 指令：画圆、椭圆、饼图的关键

A rx ry x-axis-rotation large-arc-flag sweep-flag x y 这个指令参数多，但每项都有明确含义：

• rx ry：椭圆的 X/Y 半径（决定弧是圆还是椭圆）。
• x-axis-rotation：椭圆长轴旋转角度（通常为 0）。
• large-arc-flag：0=小弧（≤180°），1=大弧（＞180°）。
• sweep-flag：0=逆时针画弧，1=顺时针画弧。
• x y：弧线终点坐标。

例如画一个四分之一圆（从正左到正下）：M 0 50 A 50 50 0 0 1 50 100。记住：改变 large-arc-flag 和 sweep-flag 组合，同一组坐标能画出四种不同弧线。

实用建议：写 d 属性不靠硬背，靠拆解和验证

• 从简单图形起步：先用 M→L→Z 画三角形/多边形，再加 Q 画圆角，最后尝试 A 和 C。
• 空格和逗号可互换，但别混用；数字间有空格即可，不用逗号（如 M10 20L30 40 合法）。
• 浏览器开发者工具里实时改 d 值，看图形变化——这是最快的学习方式。
• 路径太长？用 path 的 transform 或 viewBox 缩放，比手动调所有坐标更高效。

基本上就这些。SVG path 的 d 属性不是编程语言，而是一套精炼的绘图协议。写熟 M/L/Q/A/C，90% 的图标、图表、动画路径都能自己手写出来，不依赖导出工具。