[翻譯svg教程]svg中的circle元素

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設定半徑

圓形的邊框

能夠經過設置樣式設置圓形的邊框

例如

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

屬性說明 stroke             邊框的顏色

        stroke-width       邊框的寬度

        fill               填充的顏色

效果以下

固然能夠經過   屬性設置邊框爲虛線 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"/>

效果

圓形的填充

style 中的fill 屬性用於設置圓形如何填充，若是不想圓形被填充能夠把fill設置爲none

例如 這是一個不填充的效果

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

這是一個填充顏色的例子

<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/>