SVG Circle（圆）
<circle>元素用来画一个圆，它是通过给定一个圆心和半径来绘制的。
语法
下面是<circle>元素的语法声明，这里只给出主要的属性。
<circle
cx="x轴坐标"
cy="y轴坐标"
r="长度" >
</circle>
属性
| S.N. | 名称和描述 |
|---|---|
| 1 | cx - 圆心x轴坐标，默认为0。 |
| 2 | cy - 圆心y轴坐标，默认为0。 |
| 3 | r - 圆的半径。 |
实例
testSVG.html<html>
<title>SVG Circle</title>
<body>
<h1>SVG画圆实例</h1>
<svg width="350" height="400">
<g>
<text x="0" y="15" fill="black">圆 #1. 不透明</text>
<circle cx="100" cy="100" r="50" stroke="black"
stroke-width="3" fill="rgb(121,0,121)">
</g>
<g>
<text x="0" y="215" fill="black" >圆 #2. 透明 </text>
<circle cx="100" cy="300" r="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 - 图形透明度 。
