综述

绘制圆弧的含义是，以当前点作为起点，绘制一条弧线到指定的终点。

当绘制一个圆或椭圆时，最直观的方法是根据圆心及半径来绘制。而A或a命令不是，相反，它会根据起点及终点，及其他相应信息，帮我们自动计算出圆心的位置，从而确定圆弧。但由于我们不能直观地推算出圆心的准确位置，因此，对程序员来说，绘制圆弧的命令不够直观。

下面这段代码，根据A命令的参数，反求出所对应的ellipse参数，然后以灰底虚线绘制一个未经旋转的椭圆作为背景，以在视觉上比较两种图像的异同。

红点是A命令的起点，绿点是A命令的终点，橙色是A命令所绘制的圆弧。

运行后，橙色圆弧正好压在椭圆的上半部。

逐个修改相应的参数，观察两个图形的变化，从而理解A命令各参数的含义。

例如，若只将zRotateDegree的值设置为25，则可看到圆弧与椭圆不再吻合，圆弧围绕Z轴进行了旋转，且椭圆的大小也发生了改变。这是因为圆弧起点与终点的位置未改变，为满足圆弧的其他参数要求，只能将椭圆的两个轴向上的半径按比例增大，导致相对应的椭圆的尺寸增大。

在SVG规范中，变量zRotateDegree对应于参数x-axis-rotation，其含义应是指X轴围绕Z轴旋转，但实际上，Y轴也同时围绕Z轴进行了旋转，因此更确切的说法是，XY平面围绕Z轴进行了旋转，故此这里使用zRotateDegree作为变量名。

变量rx及rx分别为圆弧的X轴半径及Y轴半径，但在一开始运行时，在Console面板中可看到，所对应的椭圆的两个半径分别为100px及50px，比原值20px及10px均要大，这是因为SVG规范规定：如果圆弧的起点和终点距离太远，无法用所指定的rx及ry连接，SVG引擎应自动按比例缩放半径以满足几何约束。

修改变量largeArcFlag及sweepFlag的不同组合，观察圆弧的朝向。再结合修改终点的坐标值，观察圆弧的朝向。可以看出，参数largeArcFlag代表是否绘制长圆弧的含义很明确，但sweepFlag并非指我们原本认为的按顺时针还是按逆时针的方向的意思。该参数的具体含义，下面一节详细谈到。

通过上面的代码可以看出，SVG绘制圆弧的算法很复杂，只对数学家友好，但对程序员并不友好。

更多细节

由于需要以声明式的方式来绘制一个相对较为复杂的圆弧，SVG中绘制圆弧的算法比较独特。

上图中，我们需要从点Arc start绘制一条圆弧至点Arc end。

可以看出，这两个点为两个形状相同的椭圆的交点，或者说，这两个点来自两个椭圆。而若给定椭圆的长半径与短半径，从点Arc start绘制一条圆弧至点Arc end，共有4种绘制方法，根据这4种方法所绘制出来的圆弧在图中均已用红色标出。

4种结果依赖于需要绘制长圆弧还是短圆弧，以及是按逆时针还是按顺时针的方向来绘制。

假设我们需要绘制短圆弧。则图中第1行的第2列及第3列均为符合条件的短圆弧。第2列为按逆时针方向所绘制的短圆弧，它取自右上角这个椭圆的一小段圆弧。第3列为按顺时针方向所绘制的短圆弧，它取自左下角这个椭圆的一小段圆弧。

在这里，由于起点与终点已经确定下来，而从起点按逆时针方向绘制圆弧至终点，以及从起点按顺时针方向绘制圆弧至终点，将导致绘制出完全不同的两条圆弧。

现在，假设我们需要绘制长圆弧。则图中第2行的第2列及第3列均为符合条件的长圆弧。第2列为按逆时针方向所绘制的长圆弧，它取自左下角这个椭圆的一大段圆弧。第3列为按顺时针方向所绘制的长圆弧，它取自右上角这个椭圆的一大段圆弧。

换句话说，给定圆弧的起点与终点、长半径与短半径，这段圆弧可来自两个椭圆的相应部位。随着我们再接着确定长短圆弧及绘制方向的具体需求，这段圆弧也就随之确定下来。

我们注意到，尽管圆弧来自两个椭圆，但我们无需理会这两个椭圆如何绘制、它们的圆心各在哪里，以及所绘制的圆弧如何取自哪一个椭圆的哪一部位。所有这些，SVG的内部算法会自动帮我们确定。

可见，确定了圆弧的起点与终点，长半径与短半径，长弧或短弧，顺时针还是逆时针这几种关键因素后，这条圆弧也随之确定下来了。这就是SVG中使用A命令或a命令绘制圆弧的参数的由来，其原型如下：

A或a命令从当前点的位置，绘制一条X轴半径及Y轴半径分别为rx及ry的圆弧至(x, y)。

参数x-axis-rotation是椭圆的旋转值，以角度制 (degree) 为单位。

参数large-arc-flag指定是否需要绘制长圆弧。当值为0时，绘制短圆弧；当值为1时，绘制长圆弧。

参数sweep-flag指定是按负角度方向 (negative-angle direction) 还是按正角度方向 (positive-angle direction) 来绘制。当值为0时，按负角度方向绘制；当值为1时，按正角度方向绘制。

所谓正负方向，实际上是指椭代表椭圆公式的函数中的参数theta的变化方向：

当为负角度时，参数theta的值将从起点的角度减小至终点的角度；当为正角度时，参数theta的值将从起点的角度增大至终点的角度。

实际上，sweep-flag这个参数完全从数学角度来考量，但对于程序员来讲，很不直观，它不能直接地推测出圆弧的方向是顺时针还是逆时针。它需要结合参数large-arc-flag才能确定这一点。

绘制圆弧

下面是绘制圆弧的代码：

上面的代码，先从画布的中心(450, 300)绘制一条直线到(600, 300)，则当前位置位于(600, 300)。A命令从该位置绘制了一条圆弧至(450, 150)，圆弧的长短半径各为200及150。图中起点为红色，终点为绿色。

分别将代码中的large-arc-flag参数及sweep-flag参数的值改为1，尝试不同的组合，即可看到不同的效果。检查运行结果是否与上面图片中的效果一致。

绘制完整的圆或椭圆的问题

绘制圆弧时，注意圆弧的起点与终点不能相同。看下面代码。

我们准备从视口的中心点(400, 300)，逆时针绘制一条长圆弧至它自己(400, 300)，希望绘制一个完整的圆弧。但上面代码圆弧的终点先临时设置为(400, 299)，则圆弧出现。

如果将终点坐标改为与起点坐标完全一致的(400, 300)，圆弧不见了！

原因是，起点和终点相同的圆弧可以对应无限多个可能的圆弧（整圆），SVG渲染器无法确定具体要绘制哪一个。因此，SVG规范明确规定，当起点和终点相同时，圆弧命令应该被当作没有圆弧来处理。

解决方法，使用circle或ellipse来绘制一个完全的圆或椭圆。如果必须使用path来绘制一个完整的圆或椭圆，可将起点的坐标改为一个差距很小的浮点值，如，将起点(400, 300)改为终点(400, 300.0001)。

另一种解决方法是分别绘制两个半径相等、但方向相反的半圆，从而合成一个完整的圆。下面先使用两个不同颜色的path来绘制两个半圆。

先绘制下面的半圆，再绘制上面的半圆。下面代码合成一个path。

使用相对格式的a命令时，参数中只有x-axis-rotation及x, y才使用偏移值，而其它参数，如rx, ry, large-arc-flag, sweep-flag等, 均不会受偏移值影响。

Cubic Bézier曲线

Quadratic Bézier曲线