Chúng tôi có thể chảy văn bản dọc theo một đường cong với ba công cụ xây dựng ngay vào SVG: , và .
Đoạn mã
Dangerous Curves Ahead Làm thế nào chúng ta đến đó
Hãy tưởng tượng chúng ta vẽ một đường cong trong SVG và cung cấp cho nó một ID được gọi curve.
Xem NgwPYB Pen của Geoff Graham (@geoffgraham) trên CodePen.
Sau đó, chúng tôi thả nội dung vào SVG bằng cách sử dụng thẻ và cung cấp cho nó chiều rộng phù hợp với viewBoxkích thước SVG . Chúng tôi sẽ không nhìn thấy bất cứ điều gì, nhưng chúng tôi biết văn bản ở đâu đó ngoài màn hình.
Xem Pen ZyaYOw của Geoff Graham (@geoffgraham) trên CodePen.
Chúng tôi thực sự muốn xem văn bản đó. Chúng ta có thể bọc văn bản của mình trong thẻ và đặt nó theo các dòng của đường cong bằng cách gọi ID đường dẫn mà chúng ta đã đặt trước đó.
Xem Pen Kqywpe của Geoff Graham (@geoffgraham) trên CodePen.
Bây giờ chúng ta đang nấu ăn bằng gas!
Chúng tôi không muốn đường cong đó bị nhìn thấy, vì vậy hãy tô màu trong suốt cho đường dẫn. Chúng tôi cũng có thể làm điều này trong CSS, nhưng chúng tôi đang áp dụng nó nội tuyến trực tiếp trong đánh dấu SVG vì lợi ích của ví dụ này.
Xem Pen xrPbgx của Geoff Graham (@geoffgraham) trên CodePen.
Phần còn lại là CSS! Kích thước phông chữ chính xác sẽ phụ thuộc vào chính văn bản và họ phông chữ nào đang được sử dụng, nhưng khi bạn đạt được sự cân bằng phù hợp, bản thân SVG sẽ xử lý khả năng phản hồi và đảm bảo mọi thứ luôn ở trên đường cong ở bất kỳ tỷ lệ nào.
Xem Văn bản Pen SVG Dọc theo Đường cong của Geoff Graham (@geoffgraham) trên CodePen.
Chúng ta có thể áp dụng phương pháp tương tự cho bất kỳ loại đường cong nào.
Xem Văn bản Pen SVG Dọc theo Đường cong của Geoff Graham (@geoffgraham) trên CodePen.