Path - Elliptical Curve

Basic Drawing > Path > Elliptical Curve

Elliptical Curves

Elliptical curves are segments of an ellipse, and are known as arcs. The A (or a) command creates them by specifying the start point, end point, x and y radii, rotation and direction.

Command	Parameters	Description
A/a (elliptical arc)	rx, ry x-axis-rotation large-arc-flag sweep-flag x, y	Draws an elliptical arc from the current point to (x, y). The size and orientation of the ellipse are defined by two radii (rx, ry) and an x-axis-rotation, which indicates how the ellipse as a whole is rotated relative to the current coordinate system.The center (cx, cy) of the ellipse is calculated automatically to satisfy the constraints imposed by the other parameters.Large-arc-flag and sweep-flag contribute to the automatic calculations and help determine how the arc is drawn.

The elliptical arc command draws a section of an ellipse which meets the following constraints:

the arc starts at the current point
the arc ends at point (x, y)
the ellipse has the two radii (rx, ry)
the x-axis of the ellipse is rotated by x-axis-rotation relative to the x-axis of the current coordinate system

There are actually four different arcs (two different ellipses, each with two different arc sweeps) that satisfy these constraints.

Here we explain how large-arc-flag and sweep-flag indicate which one of the four arcs are drawn:

If large-arc-flag is '1', then one of the two larger arc sweeps will be chosen; otherwise, if large-arc-flag is '0', one of the smaller arc sweeps will be chosen,
If sweep-flag is '1', then the arc will be drawn in a "positive-angle" direction. A value of 0 causes the arc to be drawn in a "negative-angle" direction.

Code Example	SVG Image
<?xml version="1.0" standalone="no"?>	Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image. (SVG Viewer Tips)
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500">
<!-- Arc 1- large arc flag=1; sweep flag=0; rotation=0 --> <path d="M65,10 a50,25 0 1,0 50,25" stroke="blue" fill="none" />
<!-- Arc 2- large arc flag=0; sweep flag=1; rotation=20 --> <path d="M35,100 a50,25 -20 0,1 50,25" stroke="red" fill="none" />
<!-- Picture of a pie chart with two pie wedges --> <path d="M65,180 h-30 a30,30 0 1,0 30,-30 z" stroke="green" fill="purple" /> <path d="M60,175 v-30 a30,30 0 0,0 -30,30 z" stroke="green" fill="orange" />
</svg>