SVG繪制圓形簡單示例分享


今天分享“svg繪制圓形”部分

1、簡單圓形

效果圖如下:

關鍵代碼:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="40" cy="40" r="40"></circle>
</svg>

 

代碼解析:

cx和cy屬性定義圓點的x和y坐標。如果省略cx和cy,圓的中心會被設置為(0, 0);

r屬性定義圓的半徑

 

2、圓形填充顏色及邊框

效果圖如下:

關鍵代碼:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="45" cy="45" r="40" stroke-width="3" stroke="blue" fill="red"></circle>
</svg>

 

代碼解析:

fill 屬性定義圓形的填充顏色(rgb 值、顏色名或者十六進制值);

stroke-width 屬性定義圓形邊框的寬度;

stroke 屬性定義圓形邊框的顏色

 

好了今天的分享這里結束,我也是一邊學習一邊分享的,若有錯誤的地方請大家指正,下次分享“svg繪制橢圓”部分,希望大家屆時來瀏覽,謝謝大家。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM