SVG Path: Elliptical Arc

This page is a tutorial on SVG path element's elliptical arc command A and a.

[see SVG Path Tutorial]

Basic Parameters

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 30 20, 0, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>

A rx ry rotate LargeArcFlag SweepFlag x y

Draw a elliptical arc from the current point to x, y. The ellipse has radius rx ry (major/minor axis), rotated by rotate (in degrees, clockwise.). The LargeArcFlag and SweepFlag should be 1 or 0, they control which section of the ellipse to use.

a

(relative coordinate).

[see Ellipse]

Rotation

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 30, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 61, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 91, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>

<svg width="100" height="100">
<path d="M 0 50 L 10 50 A 3 2, 181, 0 0, 90 50 L 100 50"
style="stroke:black; fill:yellow" />
</svg>

For math detail, see Ellipse

Large Arc Flag and Sweep Flag

When a line cuts ellipse into 2 arcs, there's a larger arc and a smaller arc. The parameter LargeArcFlag specifies which arc to use.

The SweepFlag specifies which side of the path the curve is drawn.

Arc of Circle

SVG: Circle Arc