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
屬性定義了圓的透明度