SVG <circle>
SVG 圓形 - <circle>
<circle> 元素用於建立圓形。
<circle> 元素有三個基本屬性來定位和設定圓的大小
| Attribute | 描述 |
|---|---|
| r | 必需。圓的半徑 |
| cx | 圓的 x 軸中心。預設值為 0 |
| cy | 圓的 y 軸中心。預設值為 0 |
一個 SVG 圓形
以下示例建立一個圓
這是 SVG 程式碼
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" />
</svg>
自己動手試一試 »
程式碼解釋
r屬性定義了圓的半徑cx和cy屬性定義了圓的 x 軸和 y 軸中心。如果省略它們，圓的中心將設定為 (0,0)fill屬性定義了圓的顏色
帶邊框的 SVG 圓形
以下示例建立一個帶邊框的圓
這是 SVG 程式碼
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" stroke="green" stroke-width="3" />
</svg>
自己動手試一試 »
程式碼解釋
stroke屬性定義了圓周圍邊框的顏色stroke-width屬性定義了圓周圍邊框的寬度
帶透明度的 SVG 圓形
以下示例建立一個帶透明度的圓
這是 SVG 程式碼
示例
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" stroke="green" stroke-width="3" opacity="0.5" />
</svg>
自己動手試一試 »
程式碼解釋
opacity屬性定義了圓的透明度
