SVG<ellipse>元素可以用来绘制椭圆。椭圆其实就是有不同高度和宽度的圆，即其在x和y方向上的半径不同。
视频版
如果你中意视频版教程，可以直接看下面的视频：
SVG ellipse示例
下面是一个SVG ellipse例子：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<ellipse cx="40" cy="40" rx="30" ry="15"
style="stroke:#006600; fill:#00cc00"/>
</svg>
图片如下：
如圆形，椭圆的圆心在cx，cy。但是其在x和y方向上的半径有两个属性指定：rx和ry属性。如你所见，rx的属性值大于ry属性，使椭圆的宽大于高。如果将rx和ry属性设置为一样的值，会得到一个正常的圆形。
stroke-width
你可以使用stroke-width样式属性设置椭圆的边框宽度，示例代码如下：
<ellipse cx="50" cy="50" rx="40" ry="30"
style="stroke: #ff0000;
stroke-width: 5;
fill: none;
"/>
渲染结果如下：
stroke-dasharray
你可以使用stroke-dasharray样式属性将椭圆边框变成虚线。示例如下：
<ellipse cx="50" cy="50" rx="40" ry="30"
style="stroke: #ff0000;
stroke-width: 5;
stroke-dasharray: 10 5;
fill: none;
"/>
此示例中，将虚线的宽度设置为10，并将虚线之间的空间（虚线之间的空格）设置为5。渲染后的样子如下：
stroke-opacity
你可以使用stroke-opacity样式属性将SVG椭圆的边框半透明化。示例如下：
<ellipse cx="50" cy="50" rx="40" ry="30"
style="stroke: #ff0000;
stroke-width: 5;
fill: none;
"/>
<ellipse cx="60" cy="60" rx="40" ry="30"
style="stroke: #0000ff;
stroke-width: 5;
stroke-opacity: 0.5;
fill: none;
"/>
这些SVG椭圆渲染如下：
注意看第二个（蓝色）椭圆是如何透明的，以及如果通过它的边框看到红色椭圆。
fill
fill样式属性用来为椭圆设置填充，示例如下：
<ellipse cx="50" cy="50" rx="40" ry="30"
style="stroke: #ff0000;
stroke-width: 5;
fill: #ff6666;
"/>
渲染结果如下：
fill-opacity
fill-opacity样式属性可以用来设置椭圆填充色的透明度，示例代码如下：
<ellipse cx="50" cy="50" rx="40" ry="30"
style="stroke: #ff0000;
stroke-width: 5;
fill: none;
"/>
<ellipse cx="60" cy="60" rx="40" ry="30"
style="stroke: none;
fill: #0000ff;
fill-opacity: 0.5;
"/>
渲染结果如下：
注意看，第二个（蓝色）椭圆是半透明的，透过它，我们能看到红色椭圆。