×

Cách sử dụng thẻ <path> để vẽ hình dạng trong SVG trong HTML

Avatar of admin
admin 7 Views

Để tạo ra các hình dạng khác nhau trong SVG (Scalable Vector Graphics) trong HTML, thẻ <path> là một trong những công cụ quan trọng và mạnh mẽ bạn có thể sử dụng. Thẻ này cho phép bạn vẽ nhiều loại hình dạng phức tạp từ đường thẳng, đường tròn, cho đến các hình dạng tùy chỉnh khác mà không cần phải sử dụng nhiều thẻ SVG khác nhau. Dưới đây là hướng dẫn chi tiết về cách sử dụng thẻ này.

Khái niệm cơ bản về thẻ <path>

Thẻ <path> trong SVG dùng để định nghĩa một đường dẫn, có thể là một đường cong, đường thẳng, hoặc bất kỳ hình dạng phức tạp nào. Đường dẫn được mô tả thông qua các câu lệnh và tọa độ, chính xác hơn là thuộc tính d.

Thuộc tính d

Thuộc tính d là thuộc tính quan trọng nhất của thẻ <path>. Nó chứa "chuỗi đường dẫn" - tổ hợp của các lệnh và các tham số để vẽ hình dạng.

Dưới đây là mô tả ngắn gọn một số lệnh phổ biến:

  • M (moveto): Di chuyển "bút vẽ" đến một điểm nhất định mà không vẽ.
  • L (lineto): Vẽ một đường thẳng từ điểm hiện tại đến một điểm khác.
  • H (horizontal lineto) và V (vertical lineto): Vẽ đường thẳng theo chiều ngang hoặc dọc.
  • C (curveto): Vẽ một đoạn đường cong Bézier bậc ba.
  • Q (quadratic Bézier curve): Vẽ một đoạn đường cong Bézier bậc hai.
  • Z hoặc z (closepath): Đóng đường dẫn hiện tại bằng cách vẽ một đường thẳng trở lại điểm bắt đầu.

Ví dụ cơ bản

  1. Đường thẳng đơn giản

    <svg width="100" height="100">
   <path d="M10 10 L90 90" stroke="black" fill="transparent"/>
</svg>

    Đây là ví dụ cơ bản của việc vẽ một đường thẳng từ điểm (10,10) đến điểm (90,90).

  2. Đường cong Bézier bậc ba

    <svg width="100" height="100">
   <path d="M10 80 C 40 10, 65 10, 95 80" stroke="blue" fill="transparent"/>
</svg>

    Lệnh C chỉ định ba điểm: điểm bắt đầu, điểm điều khiển 1, điểm điều khiển 2, và điểm kết thúc để tạo ra đường cong Bézier.

  3. Hình chữ nhật bo tròn

    <svg width="100" height="100">
   <path d="M10 10 H90 V90 H10 Z" stroke="green" fill="lightgreen"/>
</svg>

    Trong ví dụ này, dòng lệnh M di chuyển tới điểm (10,10), H vẽ đường ngang đến (90,10), V vẽ đường dọc tới (90,90), và lệnh Z đóng đường dẫn quay lại điểm (10,10), tạo thành một hình chữ nhật.

Ứng dụng nâng cao

Bạn có thể kết hợp các lệnh để tạo nên các hình dạng phức tạp hơn:

<svg width="200" height="200">
   <path d="M50 50 C150 0, 150 100, 50 150 L150 150 Z" stroke="purple" fill="pink"/>
</svg>

Trong ví dụ trên, chúng ta đã vẽ một đường cong Bézier phức tạp, sau đó thêm một đường thẳng và kết thúc với lệnh đóng đường dẫn.

Mẹo tối ưu

  • Sử dụng các tham số tương đối: Bạn có thể sử dụng các lệnh nhỏ (như m, l, c thay vì M, L, C) để vẽ ở các vị trí tương đối so với tọa độ hiện tại, giúp dễ quản lý các hình dạng phức tạp.
  • Nhóm các lệnh: Để giữ cho code dễ đọc, bạn có thể nhóm các lệnh liên quan và thêm các comment để giải thích các đoạn mã phức tạp.

Kết luận

Thẻ <path> trong SVG là một công cụ cực kỳ linh hoạt và mạnh mẽ để tạo ra các hình dạng tùy chỉnh trong HTML. Việc nắm vững cách sử dụng các lệnh và thuộc tính liên quan sẽ giúp bạn truyền tải các thiết kế sáng tạo và phức tạp một cách dễ dàng và hiệu quả. Hãy thực hành và thử nghiệm nhiều ví dụ khác nhau để làm chủ thẻ này!

Comments

Bài viết liên quan