SVG 椭圆

SVG 元素

<ellipse> 元素用于创建椭圆，椭圆是类似于被拉伸的圆的闭合曲线。

椭圆由其中心坐标和两个半径定义：一个用于 x 轴（水平），一个用于 y 轴（垂直）。如果两个半径相等，椭圆就变成一个圆。

示例 1: 创建一个简单的椭圆

以下示例创建一个带有紫色边框的黄色椭圆：

抱歉，您的浏览器不支持内联 SVG。

以下是 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Ellipse Example 1</title>
</head>
<body>
  <svg width="500" height="140">
    <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow; stroke:purple; stroke-width:2px;" />
  </svg>
</body>
</html>

代码解释：

cx: 定义椭圆中心的 x 坐标。默认值为 0。
cy: 定义椭圆中心的 y 坐标。默认值为 0。
rx: 定义椭圆的水平半径。此属性为必需。
ry: 定义椭圆的垂直半径。此属性为必需。
style: 在此用于设置填充颜色、描边颜色和描边宽度。或者，可以直接在元素上使用表示属性，例如 fill=“yellow”、stroke=“purple” 和 stroke-width=“2”。

示例 2: 叠加多个椭圆

SVG 元素按照它们在文档中出现的顺序进行渲染。此示例创建三个相互叠加的椭圆：

抱歉，您的浏览器不支持内联 SVG。

以下是 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Ellipse Example 2</title>
</head>
<body>
  <svg width="500" height="150">
    <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>

渲染顺序: 紫色椭圆先绘制，然后在上面绘制浅绿色椭圆，最后在最上面绘制黄色椭圆。

示例 3: 组合椭圆以实现效果

此示例组合两个椭圆以创建简单的视觉效果，如环或按钮高亮：

抱歉，您的浏览器不支持内联 SVG。

以下是 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Ellipse Example 3</title>
</head>
<body>
  <svg width="500" height="100">
    <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>

提示: 椭圆是矢量图形中的基本形状。它们可以用于从简单的椭圆形到更复杂插图的组件，例如眼睛、轮子或行星轨道。