Cách vẽ đường gấp khúc (Polyline) trong HTML5 SVG

SVG (Scalable Vector Graphics) là ngôn ngữ mô tả đồ họa vector 2D bằng XML, được render bởi trình duyệt web giống như PNG, GIF, JPG.

Để vẽ đường gấp khúc (polyline) trong SVG, dùng phần tử <polyline>. Phần tử này tạo hình dạng gồm các đoạn thẳng nối tiếp. Thuộc tính points chứa danh sách tọa độ x,y của các đỉnh.

Ví dụ

Mã sau vẽ một đường gấp khúc màu đỏ:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #svgelem {
        position: relative;
        left: 20%;
        transform: translateX(-20%);
      }
    </style>
    <title>HTML5 SVG Polyline</title>
  </head>
  <body>
    <h2>HTML5 SVG Polyline</h2>
    <svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
      <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
    </svg>
  </body>
</html>

Lưu ý: fill="red" sẽ tô màu kín khu vực bao quanh bởi polyline (nếu đường kín). Nếu chỉ muốn đường viền, dùng fill="none" stroke="red" stroke-width="2".