SVG弧线命令A通过7个参数精确绘制椭圆弧，需指定半径、旋转角、大弧/小弧标志及扫掠方向，起点为当前路径位置，不直接设定圆心。

SVG路径中的弧线命令 A（或小写 a）用于绘制椭圆弧，参数多、逻辑稍复杂，但掌握后能精准控制曲线形状。它不是简单“画一段圆弧”，而是基于椭圆的几何约束来定位起点到终点的一段弧，需同时指定椭圆尺寸、旋转、方向和跨度。

弧线命令 A 的完整语法与参数顺序

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

共7个参数，依次为：

• rx：椭圆X轴半径（水平方向半长轴）
• ry：椭圆Y轴半径（垂直方向半短轴）
• x-axis-rotation：椭圆自身绕X轴的旋转角度（单位：度，顺时针为正）
• large-arc-flag：0 或 1，决定取大弧还是小弧（当两点间可作两段椭圆弧时）
• sweep-flag：0 或 1，决定弧线绘制方向（0 = 顺时针，1 = 逆时针）
• x y：弧线终点坐标（绝对位置；若用 a 则为相对当前位置的偏移）

注意：起点是当前路径的“当前位置”（即前一个命令的终点），A 不指定起点，只定义从该点出发、落在同一椭圆上的终点弧段。

立即学习“前端免费学习笔记（深入）”；

large-arc-flag 和 sweep-flag 如何共同决定哪一段弧被绘制

给定起点、终点、rx/ry 和旋转角后，通常存在最多四段可能的椭圆弧（因椭圆有两个方向、每方向有大小两种跨度）。这两个标志位联合筛选出唯一一段：

• 先看 large-arc-flag：选“大弧”（>180°）还是“小弧”（≤180°）
• 再看 sweep-flag：在满足上一条件的候选弧中，选顺时针走向（0）还是逆时针走向（1）的那一段

例如：起点 (0,0)，终点 (200,0)，rx=100，ry=50，旋转0°。此时椭圆水平放置，两点位于同一水平线。可能弧段有：
– 小弧+顺时针：下半椭圆（从左到右沿底部走）
– 小弧+逆时针：上半椭圆（从左到右沿顶部走）
– 大弧+顺时针：上半椭圆绕远路（>180°）
– 大弧+逆时针：下半椭圆绕远路
设置 A 100 50 0 0 1 200 0 即选“小弧 + 逆时针” → 画上半椭圆弧。

椭圆旋转与坐标系的关系

x-axis-rotation 是对椭圆本身的旋转，不是对路径或坐标系的变换。旋转后，椭圆的主轴不再与SVG坐标轴对齐，但起点和终点仍在原坐标系中指定。计算时，SVG渲染引擎会先将起点、终点反向旋转该角度，求解标准位置下的椭圆弧，再整体旋转回来。这意味着：

• 即使 rx ≠ ry，旋转后弧线看起来可能像倾斜的“圆弧”，但数学上仍是椭圆的一部分
• 旋转值过大（如 45°）可能导致实际可用弧段变窄，甚至无解（此时浏览器可能回退为直线或忽略）
• 常用技巧：设 rx == ry 且旋转非零，可模拟任意角度的圆弧（等效于用圆弧命令 A r r ... 绘制旋转后的圆）

常见误区与调试建议

初学者易因参数理解偏差导致弧线“消失”或“突变”：

• 误认为 A 能直接指定圆心：A 不接受圆心坐标，圆心由起点、终点、rx/ry、旋转及标志位自动推算
• 忽略当前点影响：A 总是从“当前点”出发。若前序命令未正确定位（如没 closepath 后又跟 A），起点错则整段弧偏移
• large-arc-flag 设反导致弧跳到对面：当视觉预期是小弧却设了 1，可能画出几乎绕一圈的大弧，看起来像折线或反向弯曲
• 调试技巧：先固定 rx==ry、x-axis-rotation==0，调通 basic 圆弧；再逐步引入旋转和不等半径；用 <circle></circle> 标出起点/终点辅助定位