Cách vẽ đa giác (Polygon) trong HTML5 SVG

SVG (Scalable Vector Graphics) là ngôn ngữ XML mô tả đồ họa vector 2D, hiển thị tốt trên mọi trình duyệt hiện đại.

Để vẽ đa giác trong SVG, dùng phần tử <polygon>. Phần tử này tạo hình kín có ít nhất 3 cạnh. Thuộc tính points định nghĩa tọa độ x,y của các đỉnh.

Ví dụ

Mã sau vẽ một tam giác màu xanh lá:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 10%;
        transform: translateX(-20%);
      }
    </style>
    <title>HTML5 SVG Polygon</title>
  </head>
  <body>
    <h2>HTML5 SVG Polygon</h2>
    <svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
      <polygon points="100,20 200,180 100,200" style="fill:green;" />
    </svg>
  </body>
</html>

Khác biệt với polyline: <polygon> tự động đóng đường nối điểm cuối về điểm đầu, tạo hình kín. <polyline> thì không.