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% 的图标、图表、动画路径都能自己手写出来，不依赖导出工具。
