10.SVG circle元素

• SVG圆形视频

• 圆形边框

• 圆形填充

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圆形教程的YouTube视频：

圆形边框

你可以使用SVG stroke样式属性设置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样式属性。