SVG <vòng tròn>
Vòng tròn SVG - <vòng tròn>
Phần tử <circle>
được sử dụng để tạo một vòng tròn.
Phần tử <circle>
có ba thuộc tính cơ bản để định vị và thiết lập kích thước của hình tròn:
Attribute | Description |
---|---|
r | Required. The radius of the circle |
cx | The x-axis center of the circle. Default is 0 |
cy | The y-axis center of the circle. Default is 0 |
Vòng tròn SVG
Ví dụ sau tạo một vòng tròn:
Đây là mã SVG:
Ví dụ
<svg height="100" width="100" xmlns="https://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
r
xác định bán kính của hình tròn - Thuộc tính
cx
vàcy
xác định tâm trục x và y của đường tròn. Nếu chúng bị bỏ qua, tâm của vòng tròn được đặt thành (0,0) - Thuộc tính
fill
xác định màu của hình tròn
Vòng tròn SVG có viền
Ví dụ sau tạo một vòng tròn có viền:
Đây là mã SVG:
Ví dụ
<svg height="100" width="100" xmlns="https://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red"
stroke="green" stroke-width="3" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
stroke
xác định màu của đường viền xung quanh hình tròn - Thuộc tính
stroke-width
xác định độ rộng của đường viền xung quanh hình tròn
Vòng tròn SVG có độ mờ
Ví dụ sau tạo một vòng tròn có độ mờ:
Đây là mã SVG:
Ví dụ
<svg height="100" width="100" xmlns="https://www.w3.org/2000/svg">
<circle r="45" cx="50" cy="50" fill="red"
stroke="green" stroke-width="3" opacity="0.5" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
opacity
xác định độ mờ của vòng tròn