The Cat in the Hat SVG menawarkan tanda itu. Walaupun berfungsi seperti HTML biasa , ia menerima atribut yang membuka keupayaan membentuk teks yang kuat.
Salah satu sifat tersebut ialah textLength. Sekiranya kita menetapkannya 100, maka teks yang dibungkus akan dipaksa ke bekas penuh SVG.
Lihat Pen Lock Text SVG - Langkah 1 oleh Geoff Graham (@geoffgraham) di CodePen.
Satu lagi sifat tersebut ialah lengthAdjust. Ini hanya berlaku apabila (atau ) mempunyai satu set textLengthdan menangani cara teks diperluas atau dimampatkan agar sesuai dengan ruang tersebut. Nilai lalai adalah spacingyang mengekalkan bentuk huruf tetapi menyesuaikan jurang antara watak. Kita boleh menggunakannya spacingAndGlyphsdan itu akan menyesuaikan pengembangan kompres bentuk watak juga ketika jarak semula jadi janggal.
Lihat Pen Lock Text SVG - Langkah 2 oleh Geoff Graham (@geoffgraham) di CodePen.
Seperti , tag juga menerima font-sizeatribut yang sesuai dengan yang anda harapkan: ubah ukuran teks. Kita dapat menggunakannya untuk membuat penyesuaian pada teks di mana peningkatan ruang textLengthterlalu banyak atau terlalu sedikit ruang dan lengthAdjustmelengkapkan watak-watak.
Digabungkan bersama, ketiga-tiga atribut ini memberi kita keupayaan untuk membuat penguncian teks. Inilah yang kami dapat hasil daripada coretan di atas dengan beberapa CSS tambahan untuk gaya tambahan:
Lihat Penutup Teks Pen SVG oleh Geoff Graham (@geoffgraham) di CodePen.
Lokap Lain
Kami telah menulis mengenai lokap jenis sebelum ini:
Jenis kunci adalah reka bentuk tipografi di mana perkataan dan watak digayakan dan disusun dengan sangat khusus. Seperti reka bentuknya benar-benar terkunci di tempatnya.
SVG sangat sesuai untuk perkara seperti ini, kerana cara pengubahan saiznya. Teks di dalam SVG tidak dapat diubah suai seperti yang terdapat dalam HTML, ia mengikut skala yang unik seperti yang dilakukan oleh SVG, yang selalunya berada pada nisbah aspek sempurna yang dirancang (walaupun anda dapat mengawalnya).
Oleh itu, jika anda merancang sesuatu seperti ini dalam perisian penyuntingan vektor seperti Adobe Illustrator:
Lihat Contoh Pen Lockup Teks oleh Chris Coyier (@chriscoyier) di CodePen.
Baca lebih lanjut.