SVG 椭圆

<ellipse> 元素用于绘制椭圆形，可以看作是圆的扩展版本。

基本语法

<svg width="200" height="100">
  <ellipse cx="100" cy="50" rx="80" ry="40" fill="#3b82f6"/>
</svg>

主要属性

属性	描述
cx	椭圆中心 x 坐标（默认 0）
cy	椭圆中心 y 坐标（默认 0）
rx	x 轴半径（水平半径）
ry	y 轴半径（垂直半径）
fill	填充颜色
stroke	描边颜色
stroke-width	描边宽度

圆与椭圆的关系

当 rx 等于 ry 时，椭圆就变成了圆。

基础椭圆

<svg width="400" height="200">
  <!-- 水平椭圆 -->
  <ellipse cx="100" cy="60" rx="80" ry="40" fill="#3b82f6"/>
  
  <!-- 垂直椭圆 -->
  <ellipse cx="280" cy="100" rx="40" ry="80" fill="#22c55e"/>
</svg>

不同比例的椭圆

<svg width="500" height="150">
  <!-- 扁椭圆 -->
  <ellipse cx="70" cy="75" rx="60" ry="25" fill="#3b82f6"/>
  
  <!-- 较扁椭圆 -->
  <ellipse cx="200" cy="75" rx="60" ry="40" fill="#22c55e"/>
  
  <!-- 接近圆形 -->
  <ellipse cx="330" cy="75" rx="55" ry="50" fill="#f59e0b"/>
  
  <!-- 瘦高椭圆 -->
  <ellipse cx="440" cy="75" rx="30" ry="60" fill="#8b5cf6"/>
</svg>

带描边的椭圆

<svg width="400" height="150">
  <!-- 只有描边 -->
  <ellipse cx="80" cy="75" rx="60" ry="40" 
           fill="none" stroke="#3b82f6" stroke-width="3"/>
  
  <!-- 填充 + 描边 -->
  <ellipse cx="220" cy="75" rx="60" ry="40" 
           fill="#bfdbfe" stroke="#3b82f6" stroke-width="4"/>
  
  <!-- 虚线描边 -->
  <ellipse cx="360" cy="75" rx="60" ry="40" 
           fill="none" stroke="#ef4444" stroke-width="3"
           stroke-dasharray="10,5"/>
</svg>

透明椭圆

<svg width="300" height="200">
  <ellipse cx="100" cy="80" rx="80" ry="50" fill="#3b82f6" opacity="0.6"/>
  <ellipse cx="170" cy="100" rx="80" ry="50" fill="#ef4444" opacity="0.6"/>
  <ellipse cx="135" cy="140" rx="80" ry="50" fill="#22c55e" opacity="0.6"/>
</svg>

同心椭圆

<svg width="250" height="180">
  <ellipse cx="125" cy="90" rx="110" ry="75" fill="#3b82f6"/>
  <ellipse cx="125" cy="90" rx="85" ry="55" fill="#60a5fa"/>
  <ellipse cx="125" cy="90" rx="60" ry="38" fill="#93c5fd"/>
  <ellipse cx="125" cy="90" rx="35" ry="22" fill="#bfdbfe"/>
  <ellipse cx="125" cy="90" rx="12" ry="8" fill="white"/>
</svg>

使用 CSS 样式

<style>
  .ellipse-hover {
    fill: #3b82f6;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .ellipse-hover:hover {
    fill: #1d4ed8;
    rx: 90;
    ry: 50;
  }
</style>

<svg width="200" height="120">
  <ellipse class="ellipse-hover" cx="100" cy="60" rx="80" ry="40"/>
</svg>

椭圆动画

<svg width="400" height="150">
  <!-- 大小动画 -->
  <ellipse cx="80" cy="75" rx="50" ry="30" fill="#3b82f6">
    <animate attributeName="rx" values="50;70;50" dur="1s" repeatCount="indefinite"/>
    <animate attributeName="ry" values="30;45;30" dur="1s" repeatCount="indefinite"/>
  </ellipse>
  
  <!-- 旋转动画 -->
  <ellipse cx="220" cy="75" rx="60" ry="30" fill="#22c55e">
    <animateTransform attributeName="transform" type="rotate"
                      values="0 220 75;360 220 75" dur="3s" repeatCount="indefinite"/>
  </ellipse>
  
  <!-- 变形动画（椭圆变圆） -->
  <ellipse cx="350" cy="75" rx="50" ry="30" fill="#8b5cf6">
    <animate attributeName="rx" values="50;40;50" dur="2s" repeatCount="indefinite"/>
    <animate attributeName="ry" values="30;40;30" dur="2s" repeatCount="indefinite"/>
  </ellipse>
</svg>

实际应用示例

眼睛

<svg width="200" height="100">
  <!-- 左眼 -->
  <ellipse cx="50" cy="50" rx="35" ry="25" fill="white" stroke="#1f2937" stroke-width="2"/>
  <circle cx="50" cy="50" r="12" fill="#3b82f6"/>
  <circle cx="50" cy="50" r="5" fill="#1f2937"/>
  <circle cx="55" cy="45" r="3" fill="white"/>
  
  <!-- 右眼 -->
  <ellipse cx="150" cy="50" rx="35" ry="25" fill="white" stroke="#1f2937" stroke-width="2"/>
  <circle cx="150" cy="50" r="12" fill="#3b82f6"/>
  <circle cx="150" cy="50" r="5" fill="#1f2937"/>
  <circle cx="155" cy="45" r="3" fill="white"/>
</svg>

云朵

<svg width="200" height="100">
  <ellipse cx="60" cy="60" rx="40" ry="30" fill="#e5e7eb"/>
  <ellipse cx="100" cy="50" rx="50" ry="35" fill="#e5e7eb"/>
  <ellipse cx="150" cy="60" rx="35" ry="25" fill="#e5e7eb"/>
  <ellipse cx="120" cy="70" rx="40" ry="25" fill="#e5e7eb"/>
</svg>

阴影效果

<svg width="200" height="150">
  <!-- 阴影（椭圆） -->
  <ellipse cx="100" cy="130" rx="60" ry="15" fill="#00000033"/>
  <!-- 物体（矩形） -->
  <rect x="50" y="30" width="100" height="80" rx="10" fill="#3b82f6"/>
</svg>

按钮背景

<svg width="180" height="60">
  <ellipse cx="90" cy="30" rx="85" ry="28" fill="#3b82f6"/>
  <text x="90" y="36" text-anchor="middle" fill="white" font-size="16" font-weight="bold">
    Subscribe
  </text>
</svg>

3D 圆柱体顶部

<svg width="150" height="200">
  <!-- 圆柱体身体 -->
  <rect x="25" y="50" width="100" height="120" fill="#3b82f6"/>
  <!-- 底部椭圆 -->
  <ellipse cx="75" cy="170" rx="50" ry="20" fill="#1d4ed8"/>
  <!-- 顶部椭圆 -->
  <ellipse cx="75" cy="50" rx="50" ry="20" fill="#60a5fa"/>
</svg>

下一步

学会了椭圆，接下来让我们学习 SVG 线条 的绘制！