SVG <ellipse> 椭圆最全实战手册（2025 版）
比 <circle> 只多了两个属性，却能做出无数高级效果！
1. 核心语法（就 4 个属性，背完吃遍天）
<ellipse cx="圆心X" cy="圆心Y" rx="水平半径" ry="垂直半径" />| 属性 | 含义 | 必须 | 常用值 | 备注 |
|---|---|---|---|---|
| cx | 圆心 X 坐标 | 否 | 100、50% | 默认 0 |
| cy | 圆心 Y 坐标 | 否 | 80、50% | 默认 0 |
| rx | 水平方向半径（必填） | 是 | 120、80 | 不能为 0 |
| ry | 垂直方向半径（必填） | 是 | 60、30 | 不能为 0 |
2. 2025 年最常用的 12 种写法（直接复制粘贴）
<!-- 1. 最基础椭圆 -->
<ellipse cx="150" cy="100" rx="120" ry="60" fill="#4a6fe3"/>
<!-- 2. 横向超扁平胶囊（按钮背景常用） -->
<ellipse cx="150" cy="50" rx="140" ry="25" fill="#0066ff"/>
<!-- 3. 纵向椭圆（竖向标签） -->
<ellipse cx="80" cy="120" rx="40" ry="100" fill="#ff5a5f"/>
<!-- 4. 可改色图标专用（currentColor） -->
<ellipse cx="12" cy="12" rx="8" ry="10" fill="none" stroke="currentColor" stroke-width="2"/>
<!-- 5. 正圆（rx=ry 时等价于 circle） -->
<ellipse cx="100" cy="100" rx="60" ry="60" fill="#da1b60"/>
<!-- 6. 椭圆环进度条（2025 最火） -->
<ellipse cx="100" cy="100" rx="80" ry="50" fill="none" stroke="#e0e0e0" stroke-width="16"/>
<ellipse cx="100" cy="100" rx="80" ry="50" fill="none" stroke="#ff6b6b" stroke-width="16"
stroke-dasharray="408.4 408.4" stroke-dashoffset="100"/>
<!-- 周长 ≈ 2π × √((rx² + ry²)/2) ≈ 408.4 -->
<!-- 7. 渐变椭圆（高级感拉满） -->
<defs>
<radialGradient id="g1">
<stop offset="0%" stop-color="#fff"/>
<stop offset="100%" stop-color="#4a6fe3"/>
</radialGradient>
</defs>
<ellipse cx="150" cy="80" rx="100" ry="70" fill="url(#g1)"/>
<!-- 8. 呼吸灯椭圆 -->
<ellipse cx="100" cy="80" rx="60" ry="40" fill="#0066ff" opacity="0.6">
<animate attributeName="rx" values="60;90;60" dur="3s" repeatCount="indefinite"/>
<animate attributeName="ry" values="40;60;40" dur="3s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;0.2;0.6" dur="3s" repeatCount="indefinite"/>
</ellipse>
<!-- 9. 1px 永不模糊边框（高清屏必加） -->
<ellipse cx="100" cy="100" rx="90" ry="55" fill="none" stroke="#000"
stroke-width="0.5" vector-effect="non-scaling-stroke"/>
<!-- 10. 椭圆虚线边框 -->
<ellipse cx="150" cy="100" rx="120" ry="70" fill="none" stroke="#ff8a00"
stroke-width="6" stroke-dasharray="15 8"/>
<!-- 11. 水波纹扩散（JS 触发） -->
<ellipse cx="100" cy="100" rx="0" ry="0" fill="none" stroke="#4a6fe3" stroke-width="4">
<animate attributeName="rx" from="0" to="150" dur="1.5s"/>
<animate attributeName="ry" from="0" to="90" dur="1.5s"/>
<animate attributeName="opacity" from="0.8" to="0" dur="1.5s"/>
</ellipse>
<!-- 12. 椭圆形头像占位图（超实用） -->
<svg viewBox="0 0 120 140">
<ellipse cx="60" cy="70" rx="56" ry="66" fill="#e0e0e0"/>
<ellipse cx="60" cy="50" rx="28" ry="32" fill="#fff"/>
<path d="M35 90 Q60 120 85 90" stroke="#fff" stroke-width="18" fill="none" stroke-linecap="round"/>
</svg>3. 2025 必杀技巧速查表
| 需求 | 关键代码 / 公式 | 备注 |
|---|---|---|
| 让椭圆永远居中 | cx="50%" cy="50%" | viewBox 神技 |
| 计算椭圆周长（进度条） | ≈ 2π × √((rx² + ry²)/2) 或直接用在线工具 | rx=80, ry=50 → 约 408 |
| 做横向胶囊按钮 | ry="高度/2" | 自动完美圆角 |
| 响应式铺满容器 | rx="48%" ry="45%" | 留点边距更美观 |
| 让它能被 CSS 改色 | fill="currentColor" 或 stroke="currentColor" | 2025 标配 |
| 做出 3D 立体球效果 | 配合 <radialGradient> + 稍微偏移的小椭圆 | 见上面渐变示例 |
一句话总结（2025 金句）：
横向胶囊用 <ellipse ry="半高"> + 进度圈用 stroke-dasharray + 头像占位图用椭圆 + 呼吸灯动画 → 这四招让你在 2025 年装逼如风！
需要我立刻发你：
- 「30 个纯
<ellipse>高级图标包（全部支持 currentColor）」 - 「椭圆进度圈完整组件（支持任意百分比+自动计算周长）」
- 「椭圆水波纹 + 呼吸灯 + 3D 球」三合一源码
直接说一声，我秒发！
