SVG<circle>元素用于绘制圆。这是一个简单的示例：

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>

</svg>

这是结果图像：

圆以cx，cy为中心，半径为r。 cx，cy和r是<circle>元素的属性。

圆行程

我们可以使用SVG笔触样式属性设置SVG圆的笔触(轮廓)。在此页面的第一个示例中，笔划设置为颜色"#006600"，即深绿色。但是，我们不仅可以设置笔触颜色，还可以设置更多。我们也可以使用stroke-width样式属性设置笔划宽度。这是一个例子：

<circle cx="40" cy="40" r="24"
    style="stroke:#006600;
           stroke-width: 3;
           fill:#00cc00"/>

这是该圆圈的外观：

请注意，现在的笔触比此页面上显示的第一个示例中的笔触更宽(更厚)。

我们还可以使用stroke-dasharray属性以虚线绘制描边。这是一个例子：

<circle cx="40" cy="40" r="24"
    style="stroke:#006600;
           stroke-width: 3;
           stroke-dasharray: 10 5;
           fill:#00cc00"/>

这是渲染时的外观：

我们也可以删除圆的笔触(轮廓)，只需用填充颜色填充圆即可。这是一个例子：

<circle cx="40" cy="40" r="24"
    style="stroke: none;
           fill:#00cc00"/>

这是没有笔触的圆的外观：

圆填充

" fill"样式属性控制圆的填充方式。我们可以通过将fill属性设置为none来选择完全不填充。这是一个例子：

<circle cx="40" cy="40" r="24"
    style="stroke: #00600;
           fill:none"/>

这是一个没有填充的圆的外观：

我们可以使用fill属性设置填充颜色，如本文前面所看到的。这是一个例子：

<circle cx="40" cy="40" r="24"
    style="stroke: #660066;
           fill: #00ff00"/>

绘制圆时的外观如下：

我们也可以使用fill-opacity样式属性将填充设置为透明。这是一个示例，该示例绘制了两个圆，一个圆部分地位于另一个圆的上方，并且是半透明的。

<circle cx="40" cy="40" r="24"
    style="stroke: #660000;
           fill: #cc0000" />
<circle cx="64" cy="40" r="24"
    style="stroke: #000066;
           fill: #0000cc"
           fill-opacity: 0.5/>

请注意，蓝色(右)圆圈现在在内部是半透明的。为了使笔画也半透明，我们将必须使用stroke-opacity样式属性。