Recall the order of parameters used with the a command:
- [1,2]x and y radius of the ellipse
- [3]x-axis-rotation of the ellipse
- [4]large-arc-flag:
0 if arc's measure is < 180 degrees
1 if arc's measure is >= 180 degrees
- [5]sweep-flag:
0 if arc drawn in negative angle direction
1 if arc drawn in positive angle direction
- [6,7]ending x and y coordinates
Example 1 shows 4 arcs of ellipses made with the following code:
<path d="M125,75 A100,50 0 0 0 225,125" fill="none" stroke="red" stroke-width="2"/>
<path d="M125,75 A100,50 0 0 1 225,125" fill="none" stroke="blue" stroke-width="2"/>
<path d="M125,75 A100,50 0 1 0 225,125" fill="none" stroke="orange" stroke-width="2"/>
<path d="M125,75 A100,50 0 1 1 225,125" fill="none" stroke="green" stroke-width="2"/>
To create a complete horizontal ellipse instead of just an arc, we use a Z or z command to close the figure.
See Example 1.1.
<path d="M290,200 a50,100 90 1, 1 0 1 Z" fill="none" stroke="blue" stroke-width="2"/>
These ellipses are horizontally aligned, but we can alter that by changing the x-axis rotation. Here we have a vertical ellipse by making the x-axis rotation 0°, as in Example 2.
<path d="M50,450
a50,100 0 1, 1 10 1 Z"
fill="none" stroke="black" stroke-width="2"/>
By altering the x-axis rotation, we can tip the ellipse any way we want. Example 3 and Example 4 show how this is done.
<path d="M170,450 a50,100 30 1, 1 10 1 Z" fill="none" stroke="brown" stroke-width="2"/>
<path d="M450,450 a50,100 -30 1, 1 10 1 Z" fill="none" stroke="blue" stroke-width="2"/>
Note that all of these examples EXCEPT Example 1 use the a command for relative coordinates, not the A command for absolute coordinates.