×

Cách sử dụng thẻ <polyline> để tạo đường gấp khúc trong SVG trong HTML

Avatar of admin
admin 0 Views

HTML (HyperText Markup Language) là ngôn ngữ chuẩn để tạo ra các trang web, và SVG (Scalable Vector Graphics) là một định dạng dựa trên XML để mô tả đồ họa vector hai chiều. Thẻ <polyline> trong SVG được sử dụng để tạo ra các đường gấp khúc, là một trong những yếu tố cơ bản để xây dựng và định dạng đồ họa trên web.

Tạo Đường Gấp Khúc với Thẻ <polyline>

Thẻ <polyline> giúp bạn tạo ra một chuỗi các đoạn thẳng nối tiếp nhau. Dưới đây là một ví dụ cơ bản về cách sử dụng thẻ này trong SVG:

<svg width="200" height="200">
  <polyline points="50,150 150,50 150,150" style="fill:none;stroke:black;stroke-width:3" />
</svg>

Trong ví dụ trên, chúng ta có một đồ họa SVG với kích thước 200x200 pixel. Đối tượng <polyline> được xác định bởi thuộc tính points, chứa các tọa độ của các điểm đầu và điểm cuối của các đoạn thẳng. Các thuộc tính style như fill, stroke, và stroke-width được sử dụng để định dạng cho đường gấp khúc.

Cách Định Nghĩa Các Điểm

Thuộc tính points nhận các cặp tọa độ x,y để định nghĩa các vị trí của các điểm. Trong ví dụ trên:

  • 50,150: Điểm đầu tiên
  • 150,50: Điểm thứ hai
  • 150,150: Điểm cuối cùng

Tùy Chỉnh Giao Diện

Màu của Đường

Bạn có thể thay đổi màu sắc của đường bằng thuộc tính stroke. Ví dụ:

<svg width="200" height="200">
  <polyline points="50,150 150,50 150,150" style="fill:none;stroke:red;stroke-width:3" />
</svg>

Trong mã này, keyword stroke:red thay đổi màu của đường thành màu đỏ.

Độ Dày của Đường

Thuộc tính stroke-width được sử dụng để thay đổi độ dày của đường. Ví dụ:

<svg width="200" height="200">
  <polyline points="50,150 150,50 150,150" style="fill:none;stroke:black;stroke-width:5" />
</svg>

Ở đây, chúng ta thay đổi độ dày của đường lên 5 pixel.

Đổ Màu Bên Trong

Thuộc tính fill xác định màu tô bên trong của đối tượng. Dù có thể đặt màu tô, thường thì các đối tượng <polyline> được sử dụng với fill:none (không tô màu), vì chúng chủ yếu là các đường viền.

Ứng Dụng trong Thực Tế

Đồ Thị và Biểu Đồ

Đối tượng <polyline> rất hữu ích cho việc vẽ các đồ thị và biểu đồ, nơi cần lập trình các đường nối các điểm dữ liệu.

Hình Những Đường Phủ

Có thể sử dụng thẻ này để vẽ các hình phức tạp hơn bằng cách nối các điểm với nhau.

Tính Linh Hoạt Với JavaScript

Cùng với JavaScript, bạn có thể làm cho các đường này trở nên động. Ví dụ, bạn có thể thay đổi tọa độ của các điểm trong points để tạo hiệu ứng hoạt hình:

<svg id="mySVG" width="200" height="200">
  <polyline id="myPolyline" points="50,150 150,50 150,150" style="fill:none;stroke:black;stroke-width:3" />
</svg>

<script>
  var polyline = document.getElementById("myPolyline");
  var newPoints = "0,100 50,25 50,75 100,0";
  polyline.setAttribute("points", newPoints);
</script>

Trong đoạn mã trên, đoạn mã JavaScript được sử dụng để thay đổi giá trị của thuộc tính points động thời gian thực.

Kết Luận

Thẻ <polyline> trong SVG là một công cụ mạnh mẽ để tạo ra các đường gấp khúc và các hình phức tạp trong đồ họa web. Với khả năng tùy chỉnh cao thông qua các thuộc tính và dễ dàng tích hợp với JavaScript, nó cung cấp một giải pháp linh hoạt cho việc vẽ đồ họa vector trên các trang HTML.

Comments

Bài viết liên quan