SVG <ellipse>元素用于绘制椭圆。椭圆是高度和宽度不相等的圆。换句话说，它在x和y方向上的半径是不同的。

SVG椭圆示例

这是一个SVG椭圆示例：

<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样式属性设置椭圆的笔触宽度。这是一个例子：

<ellipse cx="50" cy="50" rx="40" ry="30"
         style="stroke: #ff0000;
               stroke-width: 5;
               fill: none;
        "/>

这是渲染时生成的椭圆的外观：

笔划破折号

我们可以使用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;
        "/>

呈现此SVG椭圆时的外观如下：

填充不透明度

" 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;
        "/>

注意第二个(蓝色)椭圆是半透明的，从而使红色的椭圆可见。