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 設(shè)定圓心，r設(shè)定半徑

圓形的邊框

可以通過設(shè)置樣式設(shè)置圓形的邊框

例如

<circle cx="40" cy="40" r="24"style="stroke:#006600;stroke-width: 3;fill:#00cc00"/> 屬性說明 stroke 邊框的顏色 stroke-width 邊框的寬度 fill 填充的顏色 效果如下 當(dāng)然可以通過 stroke-dasharray 屬性設(shè)置邊框為虛線 例如<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 屬性用于設(shè)置圓形如何填充，如果不想圓形被填充可以把fill設(shè)置為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來設(shè)置透明度

例如兩個圓部分重疊在一起

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

轉(zhuǎn)載于:https://www.cnblogs.com/qqloving/p/4188987.html

總結(jié)

以上是生活随笔為你收集整理的[翻译svg教程]svg中的circle元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。