SVG <đường dẫn>

Đường dẫn SVG - <đường dẫn>

Phần tử <path> được sử dụng để xác định một đường dẫn.

Các lệnh sau có sẵn cho dữ liệu đường dẫn:

• M = di chuyển
• L = lineto
• H = đường kẻ ngang
• V = đường thẳng đứng
• C = đường cong
• S = đường cong mịn
• Q = đường cong Bézier bậc hai
• T = đường cong Bézier bậc hai trơn
• A = Arc hình elip
• Z = đường gần

Lưu ý: Tất cả các lệnh trên cũng có thể được thể hiện bằng các chữ cái thường. Chữ in hoa có nghĩa là vị trí tuyệt đối, chữ thường có nghĩa là vị trí tương đối.

ví dụ 1

Ví dụ dưới đây xác định một đường dẫn bắt đầu từ vị trí 150,0 với một đường đến vị trí 75.200, sau đó từ đó, một đường đến 225.200 và cuối cùng đóng đường dẫn trở lại 150,0:

Đây là mã SVG:

Ví dụ 2

Đường cong Bézier được sử dụng để mô hình hóa các đường cong mượt mà có thể được thu nhỏ vô hạn. Nói chung, người dùng chọn hai điểm cuối và một hoặc hai điểm kiểm soát. Đường cong Bézier với một điểm điều khiển được gọi là đường cong Bézier bậc hai và loại có hai điểm điều khiển được gọi là hình khối.

Ví dụ sau tạo đường cong Bézier bậc hai, trong đó A và C là điểm đầu và điểm cuối, B là điểm điều khiển:

Đây là mã SVG:

Phức tạp? ĐÚNG!!!! Do sự phức tạp liên quan đến việc vẽ đường dẫn, chúng tôi khuyên bạn nên sử dụng trình chỉnh sửa SVG để tạo đồ họa phức tạp.