SVG <ellipse>
SVG 椭圆 - <ellipse>
<ellipse> 元素用于创建椭圆。
椭圆与圆形密切相关。区别在于椭圆的 x 半径和 y 半径不同，而圆形的 x 半径和 y 半径相等。
<ellipse> 元素有四个基本属性来定位和设置椭圆的大小
| 属性 | 描述 |
|---|---|
| rx | 必需。椭圆的 x 半径 |
| ry | 必需。椭圆的 y 半径 |
| cx | 椭圆的 x 轴中心。默认值为 0 |
| cy | 椭圆的 y 轴中心。默认值为 0 |
SVG 椭圆
以下示例创建了一个椭圆
这是 SVG 代码
示例
<svg height="140" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse rx="100" ry="50" cx="120" cy="80"
style="fill:yellow;stroke:green;stroke-width:3" />
</svg>
尝试一下 »
代码解释
rx属性定义 x（水平）半径ry属性定义 y（垂直）半径cx属性定义椭圆的 x 轴中心cy属性定义椭圆的 y 轴中心
三个椭圆
以下示例在彼此之上创建了三个椭圆
这是 SVG 代码
示例
<svg height="150" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" fill="yellow" />
</svg>
尝试一下 »
两个椭圆
以下示例组合了两个椭圆（一个黄色，一个白色）
这是 SVG 代码
示例
<svg height="100" width="500" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="240" cy="50" rx="220" ry="30" fill="yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20" fill="white" />
</svg>
尝试一下 »
