SVG <ellipse>元素用于绘制椭圆。椭圆是高度和宽度不相等的圆。换句话说，它在x和y方向上的半径是不同的。
这是一个画椭圆的示例代码:
<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属性设置为相同的数字将生成圆圈。
您可以使用 style属性 stroke-width设置椭圆的边框宽度。示例：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5;fill: none;"/> </svg>测试看看
运行后结果图像如下:
您还可以使用style属性stroke-dasharray使椭圆的笔划变为虚线。:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000;stroke-width: 5; stroke-dasharray: 10 5;fill: none;"/> </svg>测试看看
本示例将虚线宽度设置为10，虚线空间（虚线之间的间隔）设置为5。这是渲染椭圆时的外观:
您可以使用style属性stroke-opacity使SVG椭圆的边框变为半透明。
<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: none;"></ellipse> <ellipse cx="60" cy="60" rx="40" ry="30" style="stroke: #0000ff; stroke-width: 5; stroke-opacity: 0.5; fill: none;"></ellipse> </svg>测试看看
代码运行后SVG椭圆效果如下:
注意第二个（蓝色）椭圆是透明的，以及如何通过其笔划看到红色的椭圆。
可以使用fill样式属性来填充椭圆：
<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: #ff6666;"/> </svg>测试看看
运行后SVG椭圆的外观如下:
fill-opacity样式属性可被用来设置一个椭圆的填充颜色的不透明度（透明性）:
<svg height="120"> <ellipse cx="50" cy="50" rx="40" ry="30" style="stroke: #ff0000; stroke-width: 5; fill: none;"></ellipse> <ellipse cx="60" cy="60" rx="40" ry="30" style="stroke: none; fill: #0000ff; fill-opacity: 0.5;"></ellipse> </svg>测试看看
椭圆在渲染时的外观如下:
注意第二个（蓝色）椭圆是半透明的，从而使红色的椭圆可见。