Một kỹ thuật hoạt hình SVG nhỏ phổ biến là vẽ đường dẫn. Nếu bạn không thể hình dung nó, đây là một bộ sưu tập hàng triệu ví dụ mà tôi đã tạo. Về cơ bản, nét xung quanh các hình SVG sẽ tự vẽ theo thời gian.
Lần đầu tiên tôi nghe nói về nó từ bài báo của Jake Archibald Bản vẽ đường động trong SVG, đó là một lời giải thích tốt về nó khi có thể có. Nhưng tất nhiên, tôi cũng đã cố gắng giải thích riêng và chúng ta sẽ xem xét điều đó trong video này.
Tôi nghĩ dễ nhất là bắt đầu với CSS và cách các thuộc tính gạch ngang hoạt động khi được áp dụng cho hình dạng SVG. Làm thế nào để chúng có thể dài hơn, và thậm chí đủ dài đến mức che phủ (hoặc không che phủ) toàn bộ hình dạng. Sau đó bù trừ chúng khi chúng dài như vậy là cách bản vẽ hoạt động.
Sau đó, khi bạn hiểu điều đó, hãy hiểu rằng JavaScript có thể giúp tính toán độ dài của dấu gạch ngang và khoảng cách cần thiết và thực hiện nó một cách vừa phải.