【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 7 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

SVG 圓形

描繪圓形需要利用 circle 標籤,提供圓心座標位置以及半徑資訊即可描繪出所要的圓形。

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <circle cx="300" cy="120" r="80" />
</svg>

其中配罝的屬性 cx 是圓心 x 座標, cy 則是 y 座標,而 r 則是要描繪的圓半徑長度。這組circle 會在網頁上顯示一個中心座標位置為 300,120 ,半徑為 80 的圓。



調整圓形樣式與矩形相同,以下指定相關的樣式屬性。

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <circle cx="300" cy="120" r="80"
        stroke="#6941e1"  stroke-width="12" fill="#6687e7" />
</svg>

stroke 是描繪線條的顏色, stroke-width是線條的寬度, fill 則是用來填滿圓形的顏色,這一段程式碼得到以下的結果:



如果想要描繪楕圓形,可以利用ellipse元素。每一個 ellipse 標籤會呈現一個楕圓形,除了圓心座標,由於楕圓形有不同的垂直與水平半徑,水平半徑必須指定 rx 屬性,而垂直半徑則指定 ry 屬性。

<svg style="background-color:#ecf0fc;" width="600" height="240">
    <ellipse cx="300" cy="120" ry="80" rx="180"
        stroke="#6941e1"  stroke-width="12" fill="#6687e7" />
</svg>

這段配置會輸出一個水平長度 80 ,垂直高度 180 的楕圓形。



沒有留言: