SVG椭圆

<ellipse>元素的作用是绘制一个椭圆。

椭圆跟圆形很相似。不同之处在于椭圆有两个半径，并且这两个值不同，而圆形也可以说有两个半径，但两个值是相同的：

例 1

下面是一个用SVG绘制的椭圆：

上面的SVG椭圆使用了下面的SVG代码：

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

代码说明：

• cx属性定义了椭圆的x坐标
• cy属性定义了椭圆的y坐标
• rx属性定义了椭圆的横向半径
• ry属性定义了椭圆的纵向半径

例 2

下面的代码依次绘制出了三个SVG椭圆：

上面的图形使用了下面的SVG代码：

<svg height="150" width="500">
 
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple" />
 
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime" />
 
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow" />
</svg>

例 3

下面的SVG代码画了两个椭圆(一个黄色，一个白色)：

上面的SVG图形使用了下面的代码：

<svg height="100" width="500">
 
<ellipse cx="240" cy="50" rx="220" ry="30"
style="fill:yellow" />
 
<ellipse cx="220" cy="50" rx="190" ry="20"
style="fill:white" />
</svg>