<circle> 標籤可以用來產生一個圓形。
檢視原始碼 HTML
1 2 3 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="60" cy="60" r="50" /> </svg> |
cx 及 cy 是指定圓形的中心點，而 r 就是圓形的半徑：
也一樣能自訂樣式：
檢視原始碼 HTML
1 2 3 4 5 6 7 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="60" cy="60" r="50" style="fill:steelblue;stroke:red;stroke-width:10;" /> <circle cx="190" cy="60" r="50" style="fill:steelblue;stroke:red;stroke-width:10;fill-opacity:.5;" /> <circle cx="320" cy="60" r="50" style="fill:steelblue;stroke:red;stroke-width:10;opacity:.5;" /> </svg> |
筆者將 circle 的屬性整理成一個簡單的表格：
circle 屬性
| 屬性名稱 | 屬性說明 |
|---|---|
| cx | 圓形中心點 x 軸的座標 |
| cy | 圓形中心點 y 軸的座標/td> |
| r | 圓形的半徑 |
| transform | 圓形的變形效果，類似 css 中的 transform |