SVG <hình elip>
Hình elip SVG - <hình elip>
Phần tử <ellipse>
được sử dụng để tạo hình elip.
Hình elip có liên quan chặt chẽ với hình tròn. Sự khác biệt là hình elip có bán kính x và ay khác nhau, trong khi hình tròn có bán kính x và y bằng nhau.
Phần tử <ellipse>
có bốn thuộc tính cơ bản để định vị và đặt kích thước của hình elip:
Attribute | Description |
---|---|
rx | Required. The x radius of the ellipse |
ry | Required. The y radius of the ellipse |
cx | The x-axis center of the ellipse. Default is 0 |
cy | The y-axis center of the ellipse. Default is 0 |
Một hình elip SVG
Ví dụ sau tạo một hình elip:
Đây là mã SVG:
Ví dụ
<svg height="140" width="500" xmlns="https://www.w3.org/2000/svg">
<ellipse rx="100" ry="50" cx="120" cy="80"
style="fill:yellow;stroke:green;stroke-width:3" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
rx
xác định bán kính x (ngang) - Thuộc tính
ry
xác định bán kính y (dọc) - Thuộc tính
cx
xác định tâm trục x của hình elip - Thuộc tính
cy
xác định tâm trục y của hình elip
Ba hình elip
Ví dụ sau tạo ba hình elip chồng lên nhau:
Đây là mã SVG:
Ví dụ
<svg height="150" width="500" xmlns="https://www.w3.org/2000/svg">
<ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
<ellipse
cx="210" cy="45" rx="170" ry="15" fill="yellow" />
</svg>
Hãy tự mình thử »Hai hình elip
Ví dụ sau đây kết hợp hai hình elip (một màu vàng và một màu trắng):
Đây là mã SVG:
Ví dụ
<svg height="100" width="500" xmlns="https://www.w3.org/2000/svg">
<ellipse cx="240" cy="50" rx="220" ry="30"
fill="yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20"
fill="white" />
</svg>
Hãy tự mình thử »