异常教程

SVG 椭圆（超详细）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在网页设计与图形编程中，SVG 椭圆是一个基础但极其重要的形状元素。无论是构建简洁的图标、动态的交互效果，还是复杂的矢量动画，理解 SVG 椭圆的语法和特性，都能为开发者提供强大的工具支持。本文将从零开始，通过循序渐进的方式，结合代码示例和实际案例，带读者掌握 SVG 椭圆的使用方法，并探索其在不同场景下的应用潜力。

1. SVG 椭圆的基础语法

1.1 SVG 基础概念与椭圆定义

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形语言，允许开发者通过代码直接定义形状、颜色、路径等视觉元素。SVG 椭圆是 SVG 的核心形状之一，其语法简单且功能强大。

椭圆的 SVG 标签为 <ellipse>，它需要定义两个关键属性：

  • cx：椭圆中心点的横向坐标（相对于 SVG 容器的左上角）。
  • cy：椭圆中心点的纵向坐标。
  • rx：椭圆的横向半径（决定水平方向的宽度）。
  • ry：椭圆的纵向半径（决定垂直方向的高度）。

示例代码：

<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="80" ry="40" fill="skyblue" />
</svg>

这段代码创建了一个宽 200px、高 200px 的 SVG 容器，其中心坐标为 (100, 100)，横向半径 80px，纵向半径 40px，填充为天蓝色。

1.2 椭圆与圆形的关系

椭圆可以看作是“被拉伸的圆形”。当 rx 和 ry 的值相等时，椭圆就变成了圆形。例如：

<svg width="100" height="100">
  <ellipse cx="50" cy="50" rx="40" ry="40" fill="red" />
</svg>

这里的椭圆实际表现为一个半径为 40px 的红色圆形。

2. SVG 椭圆的动态效果与交互

2.1 CSS 动态效果：旋转与缩放

通过 CSS 动画，可以为 SVG 椭圆 添加动态效果。例如，让椭圆旋转并逐渐缩小：

<svg width="200" height="200" style="border:1px solid #000">
  <ellipse cx="100" cy="100" rx="80" ry="40" 
           fill="yellow" 
           class="animated-ellipse" />
</svg>

<style>
.animated-ellipse {
  animation: spin-and-shrink 3s infinite linear;
}

@keyframes spin-and-shrink {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(0.8); }
  100% { transform: rotate(360deg) scale(1); }
}
</style>

这个示例通过 @keyframes 定义动画，使椭圆每 3 秒旋转一周，并在中间阶段缩小到 80% 的尺寸。

2.2 JavaScript 动态交互：鼠标悬停效果

结合 JavaScript，可以实现更复杂的交互。例如，当鼠标悬停在椭圆上时，改变其半径和颜色：

<svg id="mySvg" width="200" height="200" style="border:1px solid #000">
  <ellipse id="myEllipse" cx="100" cy="100" rx="80" ry="40" fill="green" />
</svg>

<script>
document.getElementById('mySvg').addEventListener('mouseover', function() {
  const ellipse = document.getElementById('myEllipse');
  ellipse.setAttribute('rx', '100'); // 水平半径增大
  ellipse.setAttribute('ry', '60'); // 垂直半径增大
  ellipse.setAttribute('fill', 'purple');
});

document.getElementById('mySvg').addEventListener('mouseout', function() {
  const ellipse = document.getElementById('myEllipse');
  ellipse.setAttribute('rx', '80');
  ellipse.setAttribute('ry', '40');
  ellipse.setAttribute('fill', 'green');
});
</script>

此代码实现了鼠标悬停时椭圆的变形和颜色变化，增强了交互体验。

3. SVG 椭圆的进阶应用

3.1 结合其他 SVG 元素构建复杂图形

SVG 椭圆可以与其他形状（如矩形、路径）组合，形成更复杂的图形。例如，创建一个“椭圆与矩形结合”的仪表盘：

<svg width="300" height="200" style="border:1px solid #000">
  <!-- 背景椭圆 -->
  <ellipse cx="150" cy="100" rx="120" ry="60" fill="#f0f0f0" />
  
  <!-- 仪表盘边框 -->
  <rect x="70" y="40" width="160" height="120" 
        rx="30" ry="30" stroke="black" fill="transparent" />
  
  <!-- 指示器 -->
  <line x1="150" y1="100" x2="150" y2="40" 
        stroke="red" stroke-width="4" />
</svg>

这个示例通过椭圆作为背景，结合矩形和线条，构建了一个简单的仪表盘框架。

3.2 动态渐变与滤镜效果

通过 SVG 的 <linearGradient> 和滤镜（<filter>），可以为椭圆添加视觉效果。例如，一个带有渐变和阴影的椭圆：

<svg width="200" height="200" style="border:1px solid #000">
  <!-- 定义线性渐变 -->
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="blue" />
      <stop offset="100%" stop-color="purple" />
    </linearGradient>
    
    <filter id="shadow">
      <feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="black" />
    </filter>
  </defs>
  
  <ellipse cx="100" cy="100" rx="80" ry="40" 
           fill="url(#gradient)" 
           filter="url(#shadow)" />
</svg>

此代码通过渐变和滤镜，使椭圆呈现出柔和的渐变色和投影效果。

4. 实际案例：SVG 椭圆在徽标设计中的应用

4.1 案例背景

许多品牌徽标使用椭圆作为核心元素。例如，设计一个简约的“科技公司”徽标：

<svg width="200" height="200" style="border:1px solid #000">
  <!-- 主体椭圆 -->
  <ellipse cx="100" cy="100" rx="90" ry="50" 
           fill="#4a90e2" />
  
  <!-- 内部装饰 -->
  <circle cx="100" cy="100" r="30" fill="white" />
  <polygon points="90,90 110,90 100,80" fill="black" />
</svg>

这个徽标通过椭圆作为背景，结合圆形和三角形，形成简洁的科技感设计。

4.2 动态徽标效果

进一步添加动画，让徽标在页面中动态变化：

<svg width="200" height="200" style="border:1px solid #000">
  <ellipse id="mainEllipse" cx="100" cy="100" rx="90" ry="50" 
           fill="#4a90e2" />
  
  <circle cx="100" cy="100" r="30" fill="white" />
  <polygon points="90,90 110,90 100,80" fill="black" />
</svg>

<style>
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

#mainEllipse {
  animation: pulse 2s infinite ease-in-out;
}
</style>

这里通过 @keyframes 让主椭圆产生脉冲效果，增强视觉吸引力。

5. 常见问题与解决方案

5.1 椭圆位置偏移问题

问题：椭圆的坐标设置后，图形位置不符合预期。
原因：SVG 的坐标系原点在左上角，需确保 cx 和 cy 的值在容器范围内。
解决方法：通过调试工具检查坐标值，或使用百分比定位（例如 cx="50%"）。

5.2 动态效果不生效

问题：添加动画或交互代码后，椭圆无反应。
可能原因：

  1. CSS 选择器未正确匹配元素 ID 或类名。
  2. JavaScript 未正确绑定事件或修改属性。
    解决方法：使用浏览器开发者工具检查元素和控制台错误，逐步调试代码。

结论

通过本文的讲解，读者已经掌握了 SVG 椭圆 的基础语法、动态效果实现方法，以及在徽标设计等实际场景中的应用。无论是静态图形还是交互式动画，SVG 椭圆都能提供灵活且高效的解决方案。

建议读者通过以下步骤进一步实践：

  1. 尝试修改示例代码中的 rx 和 ry 值，观察椭圆形状的变化。
  2. 结合 CSS 和 JavaScript，设计一个包含椭圆的动态徽标或仪表盘。
  3. 探索 SVG 的其他形状（如 <path>）与椭圆的组合应用。

掌握 SVG 椭圆不仅是技术能力的提升，更是打开矢量图形设计世界的一把钥匙。希望本文能激发读者的创造力，将更多精彩的 SVG 椭圆 应用带入实际项目中。

最新发布

查看更多文章