The Cat in the Hat SVG etiketi sunar . HTML'de normal gibi çalışsa da, güçlü metin şekillendirme yeteneklerinin kilidini açan nitelikleri kabul eder.
Bu niteliklerden biri textLength. Bunu olarak ayarlarsak 100, sarılmış metin , SVG kabının tüm uzunluğu boyunca zorlanacaktır.
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Kalem SVG Metin Kilitleme - Adım 1'e bakın.
Bu özelliklerden bir diğeri de lengthAdjust. Bu yalnızca (veya ) bir kümeye sahip olduğunda textLengthve metnin o alana sığacak şekilde genişletilme veya sıkıştırılma şeklini yönettiğinde geçerlidir . Varsayılan değer, spacingharf şekillerini koruyan ancak karakterler arasındaki boşlukları ayarlayan değerdir . spacingAndGlyphsBunun yerine kullanabiliriz ve bu, karakterlerin şeklini sıkıştırmanın genişlemesini ve ayrıca doğal boşluğun garip olduğu durumlarda ayarlayacaktır.
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Kalem SVG Metin Kilitleme - Adım 2'ye bakın.
Aynı şekilde , etiket de font-sizetam olarak beklediğiniz gibi yapan bir özniteliği kabul eder : metnin boyutunu değiştirin. textLengthArtışın çok fazla veya çok az yer bıraktığı ve lengthAdjustkarakterleri çarpıttığı metne ayarlamalar yapmak için bunu kullanabiliriz .
Bir araya getirildiğinde, bu üç özellik bize metin kilitlemeleri oluşturma yeteneği verir. Ekstra stil için bazı ek CSS'lerle birlikte yukarıdaki pasajın bir sonucu olarak elde ettiklerimiz:
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Kalem SVG Metin Kilitlemesine bakın.
Diğer Kilitlenmeler
Daha önce tür kilitlemeleri hakkında yazmıştık:
Yazı kilidi, kelimelerin ve karakterlerin çok özel bir şekilde biçimlendirildiği ve düzenlendiği tipografik bir tasarımdır. Sanki tasarım tam anlamıyla yerinde kilitlenmiş gibi.
SVG, yeniden boyutlandırma şekli nedeniyle bu tür şeyler için mükemmeldir. SVG'nin içindeki metin, HTML'deki türdeki gibi yeniden akıtmaz, SVG'nin yaptığı benzersiz şekilde ölçeklenir; bu, genellikle tasarlandığı mükemmel en boy oranında olur (bunu kontrol edebilirsiniz).
Dolayısıyla, Adobe Illustrator gibi vektör düzenleme yazılımında böyle bir şey tasarlarsanız:
CodePen'de Chris Coyier (@chriscoyier) tarafından yazılan Metin Kilitleme Kalem Örneğine bakın.
Daha fazla oku.