SVG 中要画一个圆，需要使用 <circle> 元素，并指定圆心的 x 和 y 坐标（cx/cy）以及半径（r）。和矩形一样，不指定 fill 和 stroke 的情况下，圆会使用黑色填充并且没有轮廓线。
属性
| 属性 | 说明 |
|---|---|
cx |
定义圆形的圆心 x 坐标（例如，cx="20" 定义圆形圆心到浏览器窗口左侧的距离是 20px），如果省略，则默认为0 |
cy |
定义圆形的圆心 y 坐标（例如，cy="20" 定义圆形圆心到浏览器窗口顶端的距离是 20px），如果省略，则默认为0 |
r |
定义圆形的半径，如果半径为0，则不显示图形 |
fill |
属于 style 属性，图形内部会使用 fill 属性代表的颜色进行填充，如果没有指定 fill 颜色（rgb 值、颜色名或者十六进制值），则会使用黑色填充，也可以指定为 none，即不填充图形内部，保持透明 |
fill-opacity |
属于 style 属性，定义填充颜色透明度（合法的范围是：0 - 1） |
stroke |
定义图形边框的颜色 |
stroke-width |
定义图形边框的宽度 |
stroke-opacity |
定义轮廓颜色的透明度（合法的范围是：0 - 1） |
opacity |
定义元素的透明值（合法的范围是：0 - 1） |
示例
<svg width="320px" height="180px" viewBox="0 0 200 200">
<circle cx="30" cy="100" r="70" style="stroke: black; fill: none;"/>
<circle cx="180" cy="100" r="70" style="stroke-width: 5; stroke: black; fill: none;"/>
</svg>
具体效果如下：
