SVG Ellipse(椭圆)




<ellipse>元素是用来画椭圆的,它是由给定的圆心、x轴半径以及y轴半径来绘制的。

语法

如下是<ellipse>的语法,这里只介绍几个主要的属性。

<ellipse
   cx="x轴坐标"
   cy="y轴坐标"
   rx="长度"
   ry="长度" >   
</ellipse>

属性

S.N. 名称和说明
1 cx - 椭圆的x轴坐标,默认为0。
2 cy - 椭圆的y轴坐标,默认为0。
3 rx - 椭圆的x轴半径。
4 ry - 椭圆的y轴坐标。

实例

testSVG.html
<html>
<title>SVG Ellipse(椭圆)</title>
<body>
<h1>SVG椭圆实例</h1>
<svg width="300" height="400">
   <g>
      <text x="0" y="15" fill="black" >椭圆 #1: 不透明.</text>
      <ellipse cx="100" cy="100" rx="90" ry="50"
      stroke="black" stroke-width="3" fill="rgb(121,0,121)">
   </g>
   <g>
      <text x="0" y="215" fill="black" >椭圆 #2: 透明 </text>
      <ellipse cx="100" cy="300" rx="90" ry="50"
      style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0);stroke-opacity:0.5;opacity:0.5">
   </g>
</svg>
</body>
</html>

输出

在Chrome浏览器上打开文件,你能用Chrome/Firefox/Opera或IE9+直接看到SVG图像而不用任何插件,在IE8里需要使用activeX控件才能看SVG图像。

SVG椭圆实例

SVG椭圆实例

实例中,使用了style(样式),这里说下几个样式的含义。fill - 填充颜色,none表示不填充颜色,stroke-width - 图边的宽度 ,  stroke - 图边的颜色 ,  stroke-opacity - 图边透明度 ,  opacity - 图形透明度 。