马黑黑老师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 按逆时针方向绘制圆弧，因此此参数决定了圆弧凸面的朝向。