Làm thế nào để vẽ một polyline trong HTML5 SVG?

SVG là viết tắt của Scalable Vector Graphics và là một ngôn ngữ để mô tả các ứng dụng đồ họa và đồ họa 2D trong XML và XML sau đó được hiển thị bởi một trình xem SVG. Hầu hết các trình duyệt web có thể hiển thị SVG giống như chúng có thể hiển thị PNG, GIF và JPG.

Để vẽ một đa giác trong HTML SVG, hãy sử dụng phần tử SVG . Phần tử là để tạo ra một hình dạng bao gồm các đường thẳng. Thuộc tính điểm là tọa độ x và y cho mỗi góc.

Ví dụ

Bạn có thể thử chạy mã sau để tìm hiểu cách vẽ đa đường trong HTML5 SVG:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 20%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-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>

Đầu ra

Làm thế nào để vẽ một polyline trong HTML5 SVG?