本节我们来学习如何在 SVG 中绘制椭圆，椭圆和圆形有点像，但是又不一样。圆形只有一个半径，而椭圆 x 轴和 y 轴上的半径不同，所以椭圆就是一个不规则的圆。
如何绘制一个椭圆
在绘制椭圆时， 可以通过 cx 和 cy 属性确定椭圆的圆心，rx 设置椭圆的 x 轴的半径，ry 设置 y 轴的半径。
示例：
例如下面这个例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG学习(9xkd.com)</title> <link rel="styleSheet" type="text/css" href="https://my.oschina.net//u/4072026/blog/4917390/style.css"> </head> <body> <svg> <ellipse cx="100" cy="50" rx="50" ry="30" style="fill:red;"/> </svg> </body> </html>
在浏览器中的演示效果： 
上述代码中，我们设置了椭圆的圆心为 (100,50)，水平半径为50，垂直半径为 30。如果将 rx 和 ry 的值设置为相同的值，则会绘制一个规则的圆。
给椭圆设置透明度
如果我们要设置椭圆的透明度，可以使用 opacity 属性，这个属性的取值范围为 0 到 1 之间的小数。
示例：
例如下面这段代码中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SVG学习(9xkd.com)</title> <link rel="styleSheet" type="text/css" href="https://my.oschina.net//u/4072026/blog/4917390/style.css"> </head> <body> <svg> <ellipse cx="100" cy="50" rx="50" ry="30" style="fill:none; stroke-width: 3; stroke:#b276be; "></ellipse> <ellipse cx="150" cy="50" rx="50" ry="30" style="fill:#26c3df; opacity: 0.5;"></ellipse> </svg> </body> </html>
在浏览器中的演示效果： 
我们绘制了两个椭圆，其中左边的椭圆没有设置填充颜色，而右边的椭圆填充颜色为蓝色，透明度为 0.5。如果要改变椭圆的位置，只需要改变椭圆的圆心坐标，即 cx 和 cy 属性的值即可。