SVG <đa giác>
Đa giác có nguồn gốc từ tiếng Hy Lạp. “Poly” có nghĩa là “nhiều” và “gon” có nghĩa là “góc”.
Đa giác SVG - <đa giác>
Phần tử <polygon>
được sử dụng để tạo một đồ họa có ít nhất ba cạnh.
Đa giác được tạo thành từ các đường thẳng và hình dạng được "đóng" (nó tự động kết nối điểm cuối cùng với điểm đầu tiên).
Phần tử <polygon>
có một thuộc tính cơ bản xác định các điểm của đa giác:
Attribute | Description |
---|---|
points | Required. The list of points of the polygon. Each point must contain an x coordinate and a y coordinate |
Một đa giác có ba cạnh
Ví dụ sau tạo một đa giác có ba cạnh:
Đây là mã SVG:
Ví dụ
<svg height="220" width="500" xmlns="https://www.w3.org/2000/svg">
<polygon points="100,10 150,190 50,190"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc tính
points
xác định tọa độ x và y cho mỗi góc của đa giác
Một đa giác có bốn cạnh
Ví dụ sau tạo một đa giác có bốn cạnh:
Đây là mã SVG:
Ví dụ
<svg height="260" width="500" xmlns="https://www.w3.org/2000/svg">
<polygon points="220,10 300,210 170,250 123,234"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
Hãy tự mình thử » Một đa giác có sáu cạnh
Ví dụ sau đây tạo một đa giác có sáu cạnh:
Đây là mã SVG:
Ví dụ
<svg height="280" width="360" xmlns="https://www.w3.org/2000/svg">
<polygon points="150,15 258,77 258,202 150,265 42,202 42,77"
style="fill:lime;stroke:purple;stroke-width:3" />
</svg>
Hãy tự mình thử »Một ngôi sao đa giác
Sử dụng phần tử <polygon> để tạo ngôi sao:
Đây là mã SVG:
Ví dụ
<svg height="210" width="500" xmlns="https://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;" />
</svg>
Hãy tự mình thử »Một ngôi sao đa giác khác
Sử dụng thuộc tính fill-rule
để chỉ định phần bên trong của hình:
Đây là mã SVG:
Ví dụ
<svg height="210" width="500" xmlns="https://www.w3.org/2000/svg">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Hãy tự mình thử »Giải thích mã:
- Thuộc
fill-rule
xác định thuật toán sử dụng để chỉ định phần bên trong của hình dạng