SVG Path: Elliptical Arc
This page is a tutorial on SVG path element's elliptical arc command
- If you don't know path basics, see: SVG Path Tutorial.
- If you don't know SVG basics, see: SVG: Basic Examples.
A rx ry rotate large_arc_flag sweep_flag 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 large_arc_flag and sweep_flag should be 1 or 0, they control which section of the ellipse to use.
a= (relative coordinate).
- The elliptical arc always begin at current pen position, and ends at the last pair of numbers.
- The shape of the ellipse is determined by its major radius and minor radius. That is the first 2 numbers. Ellipse is technically a curve of 1 parameter, determined by the ratio of majorRadius/minorRadius. So, any rx/ry is the same shape, even if the actual number is different. [see Ellipse]
- The rotate parameter specifies rotation.
- The large_arc_flag and sweep_flag, are 1 or 0, booleans. They determine which part of the given ellipse arc specified above is used.
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 large_arc_flag specifies which arc to use.
The sweep_flag specifies which side of the path the curve is drawn.
Understand the Parameters in Depth
The Elliptical Arc command is not intuitive. Here's how to think about it.
- Think of a ellipse E, specified by radiuses rx and ry. This ellipse is positioned in a standard position. That is, the axes are vertical and horizontal.
- Now, think of this ellipse rotated around its center by n degrees.
- Now, think of 2 random points, A and B. These are the start/end points of a line the ellipse needs to connect to. The distance beween these 2 points may be much smaller than the ellipse's minor radius. (but is not larger than 2*majorAxes. (because if it is, the ellipse is automatically scaled up to fit.))
- Now, given the above conditions, you can translate (move, but not change orientation nor scale) the ellipse so that it fits (touches) with the points A B.
Paths – SVG 1.1 (Second Edition)#PathDataEllipticalArcCommands
If you have a question, put $5 at patreon and message me.