SVG 椭圆

定义和使用

<ellipse> 元素用于创建椭圆。

椭圆与圆紧密相关。区别在于，椭圆的 x 和 y 半径彼此不同，而圆的 x 和 y 半径相等。

示例

以下示例创建一个椭圆：

下面是 SVG 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 椭圆</h1>
  <svg height="140" width="500">
    <ellipse cx="200" cy="80" rx="100" ry="50"
    style="fill:yellow;stroke:purple;stroke-width:2" />
  </svg>
</body>
</html>

尝试一下

SVG 代码说明：

cx 属性定义椭圆中心的 x 坐标
cy 属性定义椭圆中心的 y 坐标
rx 属性定义水平半径
ry 属性定义垂直半径

以下示例在彼此之上创建三个椭圆：

下面是 SVG 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 椭圆</h1>
  <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>
</body>
</html>

尝试一下

以下示例结合了两个椭圆（一个黄色和一个白色）：

下面是 SVG 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到蝴蝶教程</title>
</head>
<body>
  <h1>SVG 椭圆</h1>
  <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>
</body>
</html>

尝试一下

定义和使用

示例

相关页面