SVG中的路径数据，即path元素的 d 属性，有一系列的路径绘制指令，其中椭圆弧指令(A)最复杂，不算椭圆弧起始点的x,y坐标的话，依然有 7 个参数。
SVG椭圆弧指令的参数，与Canvas等圆弧指令的参数有很大差别，Canvas中使用圆心、半径、起始角度、结束角度等为参数，而SVG使用起始点坐标、半径、方向、结束点坐标等为参数。
SVG之所以实现为这样的参数形式，是因为SVG中的路径包含的每段子路径具有依次首尾相连的特性，这样每一段路径绘制的起点终点就比较明确直观。
（如果是需要计算SVG椭圆弧的中心和角度，可以参考我之前写的一篇博文：
《根据SVG椭圆弧路径参数计算中心点坐标、起始角度、结束角度的Javascript函数》）
SVG椭圆弧路径指令说明：
| 指令 | A (绝对) a (相对) |
|---|---|
| 名称 | elliptical arc 椭圆弧 |
| 参数 | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ rx ry 是椭圆的两个半轴的长度。 x-axis-rotation 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。 large-arc-flag 是标记绘制大弧(1)还是小弧(0)部分。 sweep-flag 是标记向顺时针(1)还是逆时针(0)方向绘制。 x y 是圆弧终点的坐标。
扫描二维码关注公众号，回复：
3859108 查看本文章
|
| 描述 | 从当前点绘制一段椭圆弧到点 (x, y)，椭圆的大小和方向由 (rx, ry) 和 x-axis-rotation 参数决定， x-axis-rotation 参数表示椭圆整体相对于当前坐标系统的旋转角度。椭圆的中心坐标 (cx, cy) 会自动进行计算从而满足其它参数约束。large-arc-flag 和 sweep-flag 也被用于圆弧的计算与绘制。 |
实例：
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
在其它参数确定的情况下，large-arc-flag 和 sweep-flag 的不同组合，共有 4 种情况，分别对应 4 段不同的椭圆弧。
<path d="M 125,75 a100,50 0 ?,? 100,50"
style="fill:none; stroke:red; stroke-width:6"/>把上面的 "?,?" 分别替换为 "0,0" "0,1" "1,0" "1,1" 就可以产生 4 种不同情况的椭圆弧：
下面是SVG标准中的关于圆弧指令逻辑一段补充说明（W3C原文），对于完全理解其公式与算法有很大帮助。
F.6 Elliptical arc implementation notes
F.6.1 Elliptical arc syntax
An elliptical arc is a particular path command. As such, it is described by the following parameters in order:
(x1, y1) are the absolute coordinates of the current point on the path, obtained from the last two parameters of the previous path command.
rx and ry are the radii of the ellipse (also known as its semi-major and semi-minor axes).
φ is the angle from the x-axis of the current coordinate system to the x-axis of the ellipse.
fA is the large arc flag, and is 0 if an arc spanning less than or equal to 180 degrees is chosen, or 1 if an arc spanning greater than 180 degrees is chosen.
fS is the sweep flag, and is 0 if the line joining center to arc sweeps through decreasing angles, or 1 if it sweeps through increasing angles.
(x2, y2) are the absolute coordinates of the final point of the arc.
This parameterization of elliptical arcs will be referred to as endpoint parameterization. One of the advantages of endpoint parameterization is that it permits a consistent path syntax in which all path commands end in the coordinates of the new "current point". The following notes give rules and formulas to help implementers deal with endpoint parameterization.
F.6.2 Out-of-range parameters
Arbitrary numerical values are permitted for all elliptical arc parameters, but where these values are invalid or out-of-range, an implementation must make sense of them as follows:
If the endpoints (x1, y1) and (x2, y2) are identical, then this is equivalent to omitting the elliptical arc segment entirely.
If rx = 0 or ry = 0 then this arc is treated as a straight line segment (a "lineto") joining the endpoints.
If rx or ry have negative signs, these are dropped; the absolute value is used instead.
If rx, ry and φ are such that there is no solution (basically, the ellipse is not big enough to reach from (x1, y1) to (x2, y2)) then the ellipse is scaled up uniformly until there is exactly one solution (until the ellipse is just big enough).
φ is taken mod 360 degrees.
Any nonzero value for either of the flags fA or fS is taken to mean the value 1.
This forgiving yet consistent treatment of out-of-range values ensures that:
- The inevitable approximations arising from computer arithmetic cannot cause a valid set of values written by one SVG implementation to be treated as invalid when read by another SVG implementation. This would otherwise be a problem for common boundary cases such as a semicircular arc.
- Continuous animations that cause parameters to pass through invalid values are not a problem. The motion remains continuous.
F.6.3 Parameterization alternatives
An arbitrary point (x, y) on the elliptical arc can be described by the 2-dimensional matrix equation
 |
(F.6.3.1) |
(cx, cy) are the coordinates of the center of the ellipse.
rx and ry are the radii of the ellipse (also known as its semi-major and semi-minor axes).
θ is the angle from the x-axis of the current coordinate system to the x-axis of the ellipse.
θ ranges from:
- θ1 which is the start angle of the elliptical arc prior to the stretch and rotate operations.
- θ2 which is the end angle of the elliptical arc prior to the stretch and rotate operations.
- Δθ which is the difference between these two angles.
If one thinks of an ellipse as a circle that has been stretched and then rotated, then θ1, θ2 and Δθ are the start angle, end angle and sweep angle, respectively of the arc prior to the stretch and rotate operations. This leads to an alternate parameterization which is common among graphics APIs, which will be referred to as center parameterization. In the next sections, formulas are given for mapping in both directions between center parameterization and endpoint parameterization.
F.6.4 Conversion from center to endpoint parameterization
Given the following variables:
cx cy rx ry φ θ1 Δθ
the task is to find:
x1 y1 x2 y2 fA fS
This can be achieved using the following formulas:
 |
(F.6.4.1) |
 |
(F.6.4.2) |
 |
(F.6.4.3) |
 |
(F.6.4.4) |
F.6.5 Conversion from endpoint to center parameterization
Given the following variables:
x1 y1 x2 y2 fA fS rx ry φ
the task is to find:
cx cy θ1 Δθ
The equations simplify after a translation which places the origin at the midpoint of the line joining (x1, y1) to (x2, y2), followed by a rotation to line up the coordinate axes with the axes of the ellipse. All transformed coordinates will be written with primes. They are computed as intermediate values on the way toward finding the required center parameterization variables. This procedure consists of the following steps:
Step 1: Compute (x1′, y1′)
(F.6.5.1) Step 2: Compute (cx′, cy′)
(F.6.5.2) where the + sign is chosen if fA ≠ fS, and the − sign is chosen if fA = fS.
Step 3: Compute (cx, cy) from (cx′, cy′)
(F.6.5.3) Step 4: Compute θ1 and Δθ
In general, the angle between two vectors (ux, uy) and (vx, vy) can be computed as
(F.6.5.4) where the ± sign appearing here is the sign of ux vy − uy vx.
This angle function can be used to express θ1 and Δθ as follows:
(F.6.5.5) 
(F.6.5.6) where θ1 is fixed in the range −360° < Δθ < 360° such that:
if fS = 0, then Δθ < 0,
else if fS = 1, then Δθ > 0.
In other words, if fS = 0 and the right side of (F.6.5.6) is greater than 0, then subtract 360°, whereas if fS = 1 and the right side of (F.6.5.6) is less than 0, then add 360°. In all other cases leave it as is.
F.6.6 Correction of out-of-range radii
This section formalizes the adjustments to out-of-range rx and ry mentioned in F.6.2. Algorithmically these adjustments consist of the following steps:
Step 1: Ensure radii are non-zero
If rx = 0 or ry = 0, then treat this as a straight line from (x1, y1) to (x2, y2) and stop. Otherwise,
Step 2: Ensure radii are positive
Take the absolute value of rx and ry:
(F.6.6.1) Step 3: Ensure radii are large enough
Using the primed coordinate values of equation (F.6.5.1), compute
(F.6.6.2) If the result of the above equation is less than or equal to 1, then no further change need be made to rx and ry. If the result of the above equation is greater than 1, then make the replacements
(F.6.6.3) Step 4: Proceed with computations
Proceed with the remaining elliptical arc computations, such as those in section F.6.5. Note: As a consequence of the radii corrections in this section, equation (F.6.5.2) for the center of the ellipse always has at least one solution (i.e. the radicand is never negative). In the case that the radii are scaled up using equation (F.6.6.3), the radicand of (F.6.5.2) is zero and there is exactly one solution for the center of the ellipse.