SVG <polygon>

SVG đa giác - <polygon>

<polygon> Phần tử được sử dụng để tạo hình ảnh chứa ít nhất ba cạnh.

Đa giác được tạo thành từ các đường thẳng và có hình dạng "khép kín" (tất cả các đường đều kết nối với nhau).

Từ ngữ Polygon có nguồn gốc từ tiếng Hy Lạp. "Poly" có nghĩa là "nhiều", "gon" có nghĩa là "góc".

Ví dụ 1

Dưới đây là ví dụ tạo đa giác có ba cạnh:

Đây là mã SVG:

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Thử ngay

Giải thích mã:

• Thuộc tính points xác định tọa độ x và y của mỗi góc của đa giác

Ví dụ 2

Dưới đây là ví dụ tạo đa giác có bốn cạnh:

Đây là mã SVG:

<svg height="250" width="500">
 <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Thử ngay

Ví dụ 3

Sử dụng <polygon> Tạo một ngôi sao bằng phần tử:

Đây là mã SVG:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>

Thử ngay

Ví dụ 4

Thay đổi thuộc tính fill-rule thành "evenodd":

Đây là mã SVG:

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Thử ngay