Tôi thấy rằng 98% tất cả việc sử dụng SVG của tôi đến từ các tệp SVG được tạo trước hoặc nghệ thuật vectơ trong một số phần mềm thiết kế mà cuối cùng tôi xuất dưới dạng SVG. Tôi không thường xuyên thao tác bằng tay các tọa độ của những thứ trong mã SVG. Này, tôi thậm chí còn có một cuốn sách về tất cả những điều đó.
Nhưng thỉnh thoảng, nó thích hợp, và thậm chí có thể vui một chút. Trong trường hợp này, tôi muốn vẽ một đường khá cụ thể với một vài đường nét mềm trong đó. Với một chút kiến thức về cú pháp đường dẫn của SVG (công cụ vẽ lạ nhất, nhưng mạnh nhất trong số các công cụ vẽ của SVG), chúng ta có thể thực hiện nó mà không cần phiền phức nhiều.
Demo chúng tôi đã phát trong video:
Xem Pen
KOvPaa của Chris Coyier (@chriscoyier)
trên CodePen.
Ý tưởng ban đầu:
Xem
Con đường thắp sáng bằng bút của Chris Coyier (@chriscoyier)
trên CodePen.
Hãy nhớ rằng những gì chúng tôi chưa làm là điều chỉnh SVG sao cho các góc tròn vẫn ở tỷ lệ khung hình đẹp trong khi phần còn lại của SVG linh hoạt và có thể lấp đầy không gian dọc và ngang. Điều đó có thể xảy ra, nó chỉ phức tạp hơn và chúng ta sẽ phải đề cập đến nó vào lúc khác.