Kami dapat mengalir teks sepanjang garis melengkung dengan tiga alat dibangun langsung ke SVG: , dan .
Cuplikan
Dangerous Curves Ahead Bagaimana Kami Sampai Di Sana
Bayangkan kita menggambar garis lengkung di SVG dan memberinya sebuah ID bernama curve.
Lihat Pen NgwPYB oleh Geoff Graham (@geoffgraham) di CodePen.
Kemudian, kami memasukkan konten ke dalam SVG menggunakan tag dan memberinya lebar yang sesuai dengan viewBoxdimensi SVG . Kami belum akan melihat apa pun, tetapi kami tahu teksnya ada di luar layar di suatu tempat.
Lihat Pen ZyaYOw oleh Geoff Graham (@geoffgraham) di CodePen.
Kami sangat ingin melihat teks itu. Kita dapat membungkus teks kita di dalam tag dan mengaturnya untuk mengikuti garis jalur lengkung kita dengan memanggil ID jalur yang kita tetapkan sebelumnya.
Lihat Pen Kqywpe oleh Geoff Graham (@geoffgraham) di CodePen.
Sekarang kami memasak dengan gas!
Kami tidak ingin kurva itu terlihat, jadi mari beri jalur isian transparan. Kami juga dapat melakukan ini di CSS, tetapi kami menerapkannya secara langsung di markup SVG untuk kepentingan contoh ini.
Lihat Pen xrPbgx oleh Geoff Graham (@geoffgraham) di CodePen.
Sisanya adalah CSS! Ukuran font yang tepat akan bergantung pada teks itu sendiri dan jenis font apa yang digunakan tetapi, setelah Anda mencapai keseimbangan yang tepat, SVG sendiri akan menangani responsivitas dan memastikan semuanya tetap pada kurva pada skala apa pun.
Lihat Teks Pen SVG Sepanjang Jalur Melengkung oleh Geoff Graham (@geoffgraham) di CodePen.
Kita bisa menerapkan metode yang sama ini ke semua jenis jalur melengkung.
Lihat Teks Pen SVG Sepanjang Jalur Melengkung oleh Geoff Graham (@geoffgraham) di CodePen.