绘制椭圆 ellipse

详细介绍SVG椭圆ellipse元素的绑制方法，包括圆心坐标、水平和垂直半径等属性的设置。通过实际案例掌握椭圆的各种用法，适合前端开发者学习SVG图形绑制。 椭圆是圆形的扩展形式。<ellipse> 元素可以设置不同的水平和垂直半径，适合绑制椭圆形按钮、进度环、装饰元素等。

基本语法

<ellipse cx="圆心x" cy="圆心y" rx="水平半径" ry="垂直半径"/>

属性说明

• cx：圆心的 x 坐标（默认 0）
• cy：圆心的 y 坐标（默认 0）
• rx：水平半径（必需）
• ry：垂直半径（必需）

基本椭圆

<ellipse rx="60" ry="30" fill="#3498db"/>
<ellipse cx="200" cy="75" rx="40" ry="50" fill="#e74c3c"/>
<ellipse cx="320" cy="75" rx="70" ry="35" fill="#2ecc71"/>

rx 和 ry 的关系

椭圆的形状由 rx 和 ry 的比例决定：

<ellipse cx="60" cy="60" rx="40" ry="40" fill="#3498db"/>
<ellipse cx="160" cy="60" rx="50" ry="30" fill="#e74c3c"/>
<ellipse cx="270" cy="60" rx="30" ry="50" fill="#2ecc71"/>
<ellipse cx="360" cy="60" rx="20" ry="50" fill="#f39c12"/>

关系说明

• rx = ry：椭圆变成圆形
• rx > ry：椭圆扁平（横向拉伸）
• rx < ry：椭圆高瘦（纵向拉伸）
• rx 或 ry 为 0：不显示

填充与描边

<ellipse cx="50" cy="50" rx="40" ry="30" fill="#3498db"/>
<ellipse cx="130" cy="50" rx="40" ry="30" fill="none" stroke="#e74c3c" stroke-width="3"/>
<ellipse cx="210" cy="50" rx="40" ry="30" fill="#2ecc71" stroke="#27ae60" stroke-width="3"/>
<ellipse cx="290" cy="50" rx="40" ry="30" fill="#f39c12" stroke="#e67e22" stroke-width="5"/>
<ellipse cx="370" cy="50" rx="40" ry="30" fill="#9b59b6" opacity="0.5"/>

实际应用案例

椭圆按钮

<ellipse cx="220" cy="40" rx="70" ry="30" fill="none" stroke="#e74c3c" stroke-width="2"/>
<text x="220" y="45" text-anchor="middle" fill="#e74c3c" font-size="14">边框按钮</text>

<ellipse cx="80" cy="40" rx="70" ry="30" fill="#3498db"/>
<text x="80" y="45" text-anchor="middle" fill="white" font-size="14">椭圆按钮</text>

<ellipse cx="220" cy="40" rx="70" ry="30" fill="none" stroke="#e74c3c" stroke-width="2"/>
<text x="220" y="45" text-anchor="middle" fill="#e74c3c" font-size="14">边框按钮</text>

进度环

<ellipse cx="100" cy="60" rx="80" ry="40" fill="none" stroke="#ecf0f1" stroke-width="8"/>
<ellipse cx="100" cy="60" rx="80" ry="40" fill="none" stroke="#3498db" stroke-width="8" 
         stroke-dasharray="251 503" stroke-linecap="round"/>
<text x="100" y="65" text-anchor="middle" font-size="20">50%</text>

装饰元素

<ellipse cx="200" cy="50" rx="40" ry="25" fill="none" stroke="#9b59b6" stroke-width="2" stroke-dasharray="5,5"/>
<ellipse cx="200" cy="50" rx="25" ry="15" fill="none" stroke="#9b59b6" stroke-width="2"/>
<ellipse cx="200" cy="50" rx="10" ry="6" fill="#9b59b6"/>

<ellipse cx="50" cy="50" rx="30" ry="20" fill="#3498db" opacity="0.3"/>
<ellipse cx="80" cy="50" rx="30" ry="20" fill="#e74c3c" opacity="0.3"/>
<ellipse cx="110" cy="50" rx="30" ry="20" fill="#2ecc71" opacity="0.3"/>

<ellipse cx="200" cy="50" rx="40" ry="25" fill="none" stroke="#9b59b6" stroke-width="2" stroke-dasharray="5,5"/>
<ellipse cx="200" cy="50" rx="25" ry="15" fill="none" stroke="#9b59b6" stroke-width="2"/>
<ellipse cx="200" cy="50" rx="10" ry="6" fill="#9b59b6"/>

椭圆形头像框

<defs>
  <clipPath id="ellipseClip">
    <ellipse cx="100" cy="50" rx="45" ry="40"/>
  </clipPath>
</defs>
<ellipse cx="100" cy="50" rx="48" ry="43" fill="#3498db"/>
<ellipse cx="100" cy="50" rx="45" ry="40" fill="#ecf0f1"/>

行星轨道

<ellipse cx="100" cy="100" rx="90" ry="40" fill="none" stroke="#333" stroke-width="1"/>
<ellipse cx="100" cy="100" rx="70" ry="30" fill="none" stroke="#333" stroke-width="1"/>
<ellipse cx="100" cy="100" rx="50" ry="20" fill="none" stroke="#333" stroke-width="1"/>
<circle cx="100" cy="100" r="15" fill="#f39c12"/>
<circle cx="190" cy="100" r="5" fill="#3498db"/>
<circle cx="30" cy="100" r="3" fill="#e74c3c"/>
<circle cx="150" cy="100" r="4" fill="#2ecc71"/>

特殊效果

渐变椭圆

<defs>
  <radialGradient id="ellipseGrad" cx="30%" cy="30%">
    <stop offset="0%" stop-color="#fff"/>
    <stop offset="100%" stop-color="#3498db"/>
  </radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="80" ry="40" fill="url(#ellipseGrad)"/>

旋转椭圆

<ellipse cx="100" cy="50" rx="60" ry="20" fill="#3498db" transform="rotate(30, 100, 50)"/>

椭圆与圆形的关系

椭圆是圆形的推广形式：

当 rx = ry 时，椭圆就变成了圆形。

常见问题

Q: 椭圆不显示？

A: 检查以下几点：

• rx 和 ry 是否都设置了正值
• 是否设置了 fill 或 stroke
• 圆心坐标是否在视口范围内

Q: 如何计算椭圆周长？

A: 椭圆周长没有简单的精确公式，近似公式：

周长 ≈ π × [3(a+b) - √((3a+b)(a+3b))]
其中 a = rx, b = ry

Q: 椭圆和圆形选哪个？

A: 如果需要不同方向的半径，用椭圆；如果所有方向半径相同，用圆形更简洁。

小结

椭圆是圆形的扩展，通过 rx 和 ry 两个半径属性可以创建各种椭圆形。椭圆常用于按钮、进度指示器、装饰元素等场景。当 rx = ry 时，椭圆就变成了圆形。