SVG A指令绘制优弧劣弧演示

马黑黑

SVG A指令在给定起点 (x1,y1) 到终点 (x2,y2) 之间绘制弧线，如果弧线的长轴半径大于两点之间距离的一半，这两点间的弧线就存在四种可能：两个凸面朝向不同（左右或上下）的弧线都可以各绘制一个优弧（大弧）和一个劣弧（小弧）。

A指令语法（红色部分）及参数解释：

语法：M x1 y1 A rx ry, x-axis-rotation large-arc-flag sweep-flag, x2 y2

1. M x1 y1 ：非 A指令范畴，但A指令视 x1 y1 为弧线的起点坐标
2. rx ry ：圆弧的两个半轴（长度）
3. x-axis-rotation ：圆弧相对于坐标系的旋转角度（角度）
4. large-arc-flag ：绘制大弧(1)还是小弧(0)部分
5. sweep-flag ：按顺时针(1)还是逆时针(0)方向绘制弧线
6. x2 y2 ：圆弧终点坐标

【例】<path d="M 10 10 A 100 60,0 0 1, 190 10" />

以下演示，将从 点(100,160) 绘制圆弧线到 点(300,270)，由于圆弧的长轴半径已设置为大于弧线起、止两点间距离的一半，可以绘制四段圆弧线：

优弧（弧面朝下）：✔️❌

劣弧（弧面朝下）：✔️❌

优弧（弧面朝上）：✔️❌

劣弧（弧面朝上）：✔️❌

核心小结：

1. 优弧劣弧出现的前提：圆弧长轴半径大于圆弧线端点到终点距离的一半；
2. 若上一条规则成立，A指令倒数第三个参数 large-arc-flag 设为 1 绘制优弧、设为 0 绘制劣弧；
3. A指令倒数第二个参数 sweep-flag 设为 1 按顺时针、设为 0 按逆时针方向绘制圆弧，因此此参数决定了圆弧凸面的朝向。

宕..

这也太有技术等级了，我就欣赏大家的精彩了！

红影

其实以前学的时候就是直接死记硬背的，并没完全理解。
现在再看，对第3条的 x-axis-rotation ：圆弧相对于坐标系的旋转角度（角度）仍然不太理解，貌似我们用的时候这个一直是0 的。

红影

感谢黑黑的详细讲解，辛苦了

马黑黑

红影 发表于 2026-7-25 22:06 其实以前学的时候就是直接死记硬背的，并没完全理解。 现在再看，对第3条的 x-axis-rotation ：圆弧相对于 ...

比较一下：

红色路径：M 20 200 A 200 160, 0 0 0, 380 200
绿色路径：M 20 200 A 200 160, 45 0 0, 380 200
蓝色路径：M 20 200 A 200 160, -45 0 0, 380 200

马黑黑

红影 发表于 2026-7-25 22:07
感谢黑黑的详细讲解，辛苦了

阔气

马黑黑

宕.. 发表于 2026-7-25 21:13
这也太有技术等级了，我就欣赏大家的精彩了！

晚上好！请多指教！

红影

马黑黑 发表于 2026-7-25 22:38
比较一下：

红色路径：M 20 200 A 200 160, 0 0 0, 380 200绿色路径：M 20 200 A 200 160, 45 0 0,  ...

这个只能是看到它实际是什么样子，记一下就完了，貌似很难理解。

红影

马黑黑 发表于 2026-7-25 22:40
阔气

跟着黑黑学习了很多，非常感谢

马黑黑

红影 发表于 2026-7-25 23:14
这个只能是看到它实际是什么样子，记一下就完了，貌似很难理解。

本质就是圆弧旋转，端点、终点不变，直观的结果是圆弧凸面朝向顺时针或逆时针偏移

马黑黑

红影 发表于 2026-7-25 23:14
跟着黑黑学习了很多，非常感谢

SVG每一个细节的知识点都可能非常琐碎，学起来也不容易