编辑这个页面须要登录或更高权限！

SVG <circle> 画圆形

<circle> SVG 元素是一个SVG的基本形状，用来创建圆,基于一个圆心和一个半径，同时可以利用stroke和fill属性对圆进行实线描边，虚线描边以及圆形的颜色填充等。

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 stroke样式属性设置SVG圆的笔触（轮廓）。在此页面上的第一个示例中，笔划设置为#006600深绿色。但是，您不仅可以设置笔触颜色，还可以设置更多。您还可以使用stroke-widthstyle属性设置笔触宽度 。这是一个示例:

<svg height="80px"><circle cx="40" cy="40" r="24"
    style="stroke:#006600;
           stroke-width: 3;
           fill:#00cc00"/></svg>
测试看看 ‹/›

这是运行后圆圈的外观:

您也可以使用stroke-dasharray属性以虚线绘制边框。这是一个示例:

<svg height="80px"><circle cx="40" cy="40" r="24"
    style="stroke:#006600;
           stroke-width: 3;
           stroke-dasharray: 10 5;
           fill:#00cc00"/></svg>
测试看看 ‹/›

这是渲染后的外观:

您也可以删除圆的边框（轮廓），仅用填充颜色填充圆。示例代码如下:

<svg height="80px"><circle cx="40" cy="40" r="24"
    style="stroke: none;
           fill:#00cc00"/></svg>
测试看看 ‹/›

没有边框的圆运行后效果如下:

Circle Fill

该fill样式属性控制圈的填充方式。通过将fill属性设置为，可以选择完全不填充none。
示例如下:

这是没有填充的圆的外观:

您可以使用fill 属性设置填充颜色，如本文前面所述，示例代码如下:

<svg height="80px"><circle cx="40" cy="40" r="24"
    style="stroke: #660066;
           fill: #00ff00"/></svg>
测试看看 ‹/›

绘制圆并填充颜色的外观如下:

您还可以使用fill-opacity style属性将填充设置为透明。以下示例绘制了两个圆，一个圆部分地位于另一个圆的上方，并且是半透明的。

<svg height="80px">
    <circle cx="40" cy="40" r="24" style="stroke: #660000;
                   fill: #cc0000;
            "></circle>
    <circle cx="64" cy="40" r="24" style="stroke: #000099;
                   fill: #0000cc;
                   fill-opacity: 0.5;
            "></circle>
</svg>
测试看看 ‹/›

运行效果如下:

请注意，蓝色（右）圆圈现在在内部是半透明的。要使笔划也为半透明，则必须使用stroke-opacitystyle属性。

SVG <ellipse> 画椭圆SVG <rect> 画矩形