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