SVG Ellipses ... ... ...

The first svg graphic is created by plotting the x and y values of circle with a radius of 100. If the x values are divided by 2, a vertical ellipse is created (i.e. rx=50, ry=100). If the y values are divided by 2, a horizontal ellipse is created. (i.e. rx=100, ry=50).

The second svg graphic is created using the svg ellipse object. The ellipse object requires cx and cy canvas coordinates for the center and rx ry (x radius and y radius). cx cy is the is center of the ellipse. rx=100, ry=100 creates circle with a radius of 100. rx=50, ry=100 creates a vertical ellipse. rx=100, ry=50 creates a horizontal ellipse.

cx, cy, rx, ry are not the foci of the ellipse. cx cy is the mid point of the ellipse. rx is the x radius and ry is the y radius around the mid point.

The third svg graphic is the same as the second graphic but with a transform='rotate' applied to the second ellipse. The rotate transform requires at least three parameters. They are the degrees of rotation and the cx cy (mid point).

The first svg graphic is created by plotting the x and y values of circle with a radius of 100. If the x values are divided by 2, a vertical ellipse is created (i.e. rx=50, ry=100). If the y values are divided by 2, a horizontal ellipse is created. (i.e. rx=100, ry=50).

The second svg graphic is created using the svg ellipse object. The ellipse object requires cx and cy canvas coordinates for the center and rx ry (x radius and y radius). cx cy is the is center of the ellipse. rx=100, ry=100 creates circle with a radius of 100. rx=50, ry=100 creates a vertical ellipse. rx=100, ry=50 creates a horizontal ellipse.

cx, cy, rx, ry are not the foci of the ellipse. cx cy is the mid point of the ellipse. rx is the x radius and ry is the y radius around the mid point.

The third svg graphic is the same as the second graphic but with a transform='rotate' applied to the second ellipse. The rotate transform requires at least three parameters. They are the degrees of rotation and the cx cy (mid point).

SVG Markup, Graphic 3