上一节:
下一节:

  SVG 椭圆

  • 定义和使用

    <ellipse> 元素用于创建椭圆。
    椭圆与圆紧密相关。 区别在于,椭圆的 x 和 y 半径彼此不同,而圆的 x 和 y 半径相等。
  • 示例

    以下示例创建一个椭圆:
    抱歉,您的浏览器不支持嵌入式SVG。
    下面是 SVG 代码:
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 椭圆</h1>
      <svg height="140" width="500">
        <ellipse cx="200" cy="80" rx="100" ry="50"
        style="fill:yellow;stroke:purple;stroke-width:2" />
      </svg>
    </body>
    </html>
    
    尝试一下
    SVG 代码说明:
    • cx 属性定义椭圆中心的 x 坐标
    • cy 属性定义椭圆中心的 y 坐标
    • rx 属性定义水平半径
    • ry 属性定义垂直半径
    以下示例在彼此之上创建三个椭圆:
    &nbsp; &nbsp; &nbsp;抱歉,您的浏览器不支持嵌入式SVG。
    下面是 SVG 代码:
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 椭圆</h1>
      <svg height="150" width="500">
        <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
        <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
        <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
      </svg>
    </body>
    </html>
    
    尝试一下
    以下示例结合了两个椭圆(一个黄色和一个白色):
    &nbsp; &nbsp;抱歉,您的浏览器不支持嵌入式SVG。
    下面是 SVG 代码:
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>欢迎来到菜鸟教程</title>
    </head>
    <body>
      <h1>SVG 椭圆</h1>
      <svg height="100" width="500">
        <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
        <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />
      </svg>
    </body>
    </html>
    
    尝试一下
上一节:
下一节: