最新的Web开发教程
 

SVG <椭圆>


SVG椭圆 - <椭圆>

所述<ellipse>元素被用来创建一个椭圆。

椭圆是密切相关的一个圆。 所不同的是一个椭圆具有彼此不同的X和ay半径,而圆具有等于x和y半径:


例1

下面的示例创建一个椭圆:

对不起,您的浏览器不支持嵌入式SVG。

下面是SVG代码:

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
试一试»

Code explanation:

  • cx属性定义椭圆的中心的x坐标
  • cy属性定义的Y椭圆的中心坐标
  • 所述rx属性定义了水平半径
  • ry属性定义垂直半径

例2

下面的示例对彼此顶部三个椭圆:

对不起,您的浏览器不支持嵌入式SVG。

下面是SVG代码:

<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>
试一试»

例3

下面的例子将两个椭圆(one yellow and one white)

对不起,您的浏览器不支持嵌入式SVG。

下面是SVG代码:

<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>
试一试»