<ellipse> 是SVG中用来绘制椭圆形的元素。与圆形相似，椭圆是由两个半径（水平半径和垂直半径）来定义的。<ellipse> 元素支持通过设置椭圆的中心位置、两个半径、填充颜色、边框颜色等属性来控制其外观。

目录

  1. 基本语法
  2. 属性详解
  3. 示例代码
  4. 参考资料
  5. 出站链接

基本语法

<ellipse cx="圆心X" cy="圆心Y" rx="水平半径" ry="垂直半径" fill="填充颜色" stroke="描边颜色" stroke-width="描边宽度" />
  • cx：椭圆的圆心X坐标，表示椭圆中心在水平轴上的位置。
  • cy：椭圆的圆心Y坐标，表示椭圆中心在垂直轴上的位置。
  • rx：椭圆的水平半径，决定椭圆在水平方向上的大小。
  • ry：椭圆的垂直半径，决定椭圆在垂直方向上的大小。
  • fill：椭圆内部的填充颜色。
  • stroke：椭圆边框的颜色。
  • stroke-width：椭圆边框的宽度，单位为像素。

属性详解

  • cx 和 cy：
    • 控制椭圆的圆心位置。默认值为cx="0"和cy="0"，即椭圆的中心位于坐标系的原点。
  • rx 和 ry：
    • 控制椭圆的两个半径，分别表示椭圆的水平半径和垂直半径。rx决定椭圆在水平轴上的拉伸程度，ry决定椭圆在垂直轴上的拉伸程度。
  • fill：
    • 用于设置椭圆的填充颜色。可以使用颜色名称（如red），十六进制颜色值（如#ff0000），RGB（如rgb(255,0,0)）等格式。
  • stroke：
    • 用于设置椭圆的边框颜色。支持与fill相同的颜色格式。
  • stroke-width：
    • 控制椭圆边框的宽度，单位为像素。如果没有设置，默认值为0，即没有边框。

示例代码

  1. 基本椭圆
<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="blue" stroke="black" stroke-width="3" />
</svg>
  • 这个例子绘制了一个蓝色填充、黑色边框的椭圆，椭圆的中心位于(100, 100)，水平半径为80，垂直半径为50。
  1. 没有边框的椭圆
<svg width="200" height="200">
  <ellipse cx="100" cy="100" rx="60" ry="40" fill="green" />
</svg>
  • 这个例子绘制了一个绿色填充、没有边框的椭圆，椭圆的中心位于(100, 100)，水平半径为60，垂直半径为40。
  1. 渐变填充的椭圆
<svg width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="url(#grad1)" stroke="black" stroke-width="3" />
</svg>
  • 这个例子展示了一个椭圆，填充了从黄色到红色的线性渐变。
  1. 动态椭圆
<svg width="200" height="200">
  <ellipse id="animateEllipse" cx="100" cy="100" rx="50" ry="30" fill="blue" />
  <animate
    xlink:href="#animateEllipse"
    attributeName="rx"
    from="50"
    to="80"
    dur="2s"
    repeatCount="indefinite"
  />
</svg>
  • 这个例子展示了一个动态椭圆，椭圆的水平半径（rx）在50和80之间动态变化，动画循环进行。
  1. 椭圆与鼠标交互
<svg width="200" height="200">
  <ellipse id="hoverEllipse" cx="100" cy="100" rx="60" ry="40" fill="red" />
  <script>
    document.getElementById('hoverEllipse').addEventListener('mouseover', function() {
      this.setAttribute('fill', 'green');
    });
    document.getElementById('hoverEllipse').addEventListener('mouseout', function() {
      this.setAttribute('fill', 'red');
    });
  </script>
</svg>
  • 这个例子展示了一个椭圆，当鼠标悬停时椭圆的颜色从红色变为绿色。

参考资料

出站链接

<ellipse> 元素是SVG图形中用于绘制椭圆的常用元素，支持灵活的配置，能够满足不同设计需求。通过调整椭圆的半径、填充颜色、边框样式等，开发者可以创建出各种各样的图形元素，广泛应用于图标设计、数据可视化以及网页动画中。