×

Cách sử dụng thẻ <polygon> để tạo hình đa giác trong SVG trong HTML

Avatar of admin
admin 0 Views

Trong thế giới phát triển web, Scalable Vector Graphics (SVG) đã trở thành một công cụ mạnh mẽ để tạo ra các hình ảnh đồ họa động và tương tác mà không ảnh hưởng đến chất lượng hiển thị khi thay đổi kích thước. Một trong những lợi ích lớn của SVG là khả năng tạo ra các hình học phức tạp một cách dễ dàng và đa dạng. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng thẻ <polygon> để tạo hình đa giác trong SVG khi lập trình HTML.

Khái Niệm Về <polygon>

Thẻ <polygon> trong SVG được dùng để vẽ các hình đa giác. Một đa giác là một hình học bao gồm một chuỗi các đoạn thẳng liên kết. Các điểm của đoạn thẳng này được xác định bởi các cặp tọa độ (x, y). Để tạo ra một hình đa giác, bạn cần xác định rõ các điểm đó qua thuộc tính points.

Cấu Trúc Cơ Bản Của Thẻ <polygon>

Cấu trúc cơ bản của thẻ <polygon> như sau:

<svg width="500" height="500">
  <polygon points="50,150 100,50 150,150" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Trong ví dụ trên:

  • Thuộc tính points chứa danh sách các tọa độ của các đỉnh của đa giác, từng cặp số xy được cách nhau bằng khoảng trắng.
  • Thuộc tính style giúp định nghĩa màu nền (fill), màu viền (stroke), và độ rộng viền (stroke-width).

Tạo Đa Giác Cơ Bản

Để tạo một đa giác cơ bản, hãy xác định các đỉnh của nó:

<svg width="200" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

Đoạn mã này tạo ra một hình ngũ giác. Mỗi số trong thuộc tính points là một tọa độ xác định vị trí một đỉnh của ngũ giác.

Tùy Chỉnh Đa Giác

Màu Nền và Màu Viền

Có nhiều thuộc tính trong CSS và SVG mà bạn có thể sử dụng để tùy chỉnh các đặc điểm hiển thị của đa giác:

<svg width="200" height="200">
  <polygon points="60,20 100,40 140,20 180,60 140,100 100,80 60,100 20,60" style="fill:lightblue;stroke:blue;stroke-width:2" />
</svg>

Với đoạn mã này, bạn sẽ có một hình bát giác với màu nền là lightblue và màu viền là blue.

Độ Dày Viền

Bạn có thể thay đổi độ dày của viền đa giác bằng cách điều chỉnh thuộc tính stroke-width:

<svg width="200" height="200">
  <polygon points="60,20 100,40 140,20 180,60 140,100 100,80 60,100 20,60" style="fill:lightblue;stroke:blue;stroke-width:4" />
</svg>

Thay đổi giá trị của stroke-width từ 2 sang 4 tạo ra viền dày hơn cho đa giác.

Ứng Dụng Nâng Cao

Bạn cũng có thể kết hợp thẻ <polygon> với các yếu tố khác của SVG để tạo ra các hình ảnh phức tạp hơn. Dưới đây là một ví dụ về việc kết hợp nhiều đa giác để tạo nên mô hình nghệ thuật:

<svg width="500" height="500">
  <polygon points="200,10 250,190 160,210" style="fill:orange;stroke:black;stroke-width:1" />
  <polygon points="400,210 250,190 290,250" style="fill:blue;stroke:black;stroke-width:1" />
  <polygon points="100,210 190,310 160,250" style="fill:green;stroke:black;stroke-width:1" />
</svg>

Với đoạn mã trên, bạn sẽ thấy ba đa giác chồng lên nhau, mỗi đa giác có màu nền và màu viền riêng biệt.

Kết Luận

Thẻ <polygon> trong SVG thực sự là một công cụ mạnh mẽ để tạo ra các hình học đa dạng trong lập trình HTML. Bằng cách sử dụng các thuộc tính cơ bản như points, fill, và stroke, bạn có thể tạo ra các đa giác đơn giản và phức tạp theo ý muốn. Hy vọng rằng qua bài viết này, bạn đã nắm vững cách sử dụng thẻ <polygon> và có thể áp dụng nó trong dự án phát triển web của mình để tạo ra các hình đồ họa phong phú và ấn tượng.

Comments

Bài viết liên quan