Kami boleh mengalir teks sepanjang satu garis melengkung dengan tiga alat dibina terus ke dalam SVG: , dan .
Coretan
Dangerous Curves Ahead Bagaimana Kami Ke sana
Bayangkan kita melukis garis lengkung di SVG dan memberikannya ID yang disebut curve.
Lihat Pen NgwPYB oleh Geoff Graham (@geoffgraham) di CodePen.
Kemudian, kami memasukkan kandungan ke dalam SVG menggunakan tag dan memberikannya lebar yang sesuai dengan viewBoxdimensi SVG . Kami belum akan melihat apa-apa, tetapi kami tahu teksnya ada di luar layar di suatu tempat.
Lihat Pen ZyaYOw oleh Geoff Graham (@geoffgraham) di CodePen.
Kami benar-benar mahu melihat teks itu. Kami dapat membungkus teks kami dalam tag dan menetapkannya untuk mengikuti garis lengkung jalan kami dengan memanggil ID laluan yang kami tetapkan sebelumnya.
Lihat Pen Kqywpe oleh Geoff Graham (@geoffgraham) di CodePen.
Sekarang kita memasak dengan gas!
Kami tidak mahu lekuk itu dilihat, jadi mari berikan jalan yang jelas. Kami juga boleh melakukan ini dalam CSS, tetapi kami menerapkannya secara langsung dalam markup SVG demi contoh ini.
Lihat Pen xrPbgx oleh Geoff Graham (@geoffgraham) di CodePen.
Selebihnya adalah CSS! Saiz fon yang tepat akan bergantung pada teks itu sendiri dan keluarga fon apa yang digunakan tetapi, setelah anda mencapai keseimbangan yang tepat, SVG itu sendiri akan menangani daya tindak balas dan memastikan semuanya tetap pada kurva pada skala apa pun.
Lihat Teks Pen SVG Sepanjang Jalan Melengkung oleh Geoff Graham (@geoffgraham) di CodePen.
Kami boleh menggunakan kaedah yang sama ini untuk semua jenis jalan melengkung.
Lihat Teks Pen SVG Sepanjang Jalan Melengkung oleh Geoff Graham (@geoffgraham) di CodePen.
