The Cat in the Hat SVG menawarkan tag tersebut. Meskipun berfungsi seperti biasa dalam HTML, ia menerima atribut yang membuka kemampuan pembentukan teks yang kuat.
Salah satu atribut tersebut adalah textLength. Jika kita menyetel ini ke 100, maka teks yang dibungkus akan dipaksa ke panjang penuh penampung SVG.
Lihat Pen SVG Text Lockup - Langkah 1 oleh Geoff Graham (@geoffgraham) di CodePen.
Salah satu atribut itu adalah lengthAdjust. Ini hanya berlaku jika (atau ) memiliki satu set textLengthdan menangani cara teks diperluas atau dikompresi agar pas dengan ruang itu. Nilai defaultnya adalah spacingyang mempertahankan bentuk huruf tetapi menyesuaikan celah antar karakter. Kita dapat menggunakan spacingAndGlyphssebagai gantinya dan itu akan menyesuaikan perluasan kompres bentuk karakter juga ketika jarak alami canggung.
Lihat Pen SVG Text Lockup - Langkah 2 oleh Geoff Graham (@geoffgraham) di CodePen.
Seperti , tag juga menerima font-sizeatribut yang berfungsi persis seperti yang Anda harapkan: ubah ukuran teks. Kita dapat menggunakannya untuk membuat penyesuaian pada teks di mana bertambahnya textLengthmenyisakan terlalu banyak atau terlalu sedikit ruang dan lengthAdjustmembengkokkan karakter menjadi rusak.
Dikombinasikan bersama, ketiga atribut ini memberi kita kemampuan untuk membuat penguncian teks. Inilah yang kami dapatkan sebagai hasil dari cuplikan di atas dengan beberapa CSS tambahan untuk gaya tambahan:
Lihat Pen SVG Text Lockup oleh Geoff Graham (@geoffgraham) di CodePen.
Penguncian Lainnya
Kami telah menulis tentang penguncian tipe sebelumnya:
Penguncian tipe adalah desain tipografi di mana kata-kata dan karakter ditata dan diatur dengan sangat spesifik. Seperti desain yang benar-benar terkunci pada tempatnya.
SVG sempurna untuk hal semacam ini, karena caranya mengubah ukurannya. Teks di dalam SVG tidak mengalir ulang seperti yang dilakukan tipe dalam HTML, ia diskalakan dengan cara unik yang dilakukan SVG, yang sering kali pada rasio aspek sempurna yang dirancang (meskipun Anda dapat mengontrolnya).
Jadi jika Anda mendesain sesuatu seperti ini di perangkat lunak pengeditan vektor seperti Adobe Illustrator:
Lihat Contoh Pena Penguncian Teks oleh Chris Coyier (@chriscoyier) di CodePen.
Baca lebih lajut.