The Cat in the Hat СВГ нуди ознаку. Иако у ХТМЛ-у функционише приближно као нормално , прихвата атрибуте који откључавају моћне могућности обликовања текста.
Један од тих атрибута је textLength. Ако поставимо ово на 100, тада ће умотани текст бити приморан на целу дужину СВГ контејнера.
Погледајте Пен СВГ Тект Лоцкуп - Корак 1, Геофф Грахам (@геоффграхам) на ЦодеПен-у.
Још један од тих атрибута је lengthAdjust. Ово се примењује само када (или ) има скуп textLengthи обрађује начин на који се текст проширује или компримује како би одговарао том простору. Подразумевана вредност је она spacingкоја чува облике слова, али прилагођава размаке између знакова. spacingAndGlyphsУместо тога можемо да користимо, а то ће прилагодити проширивање компресије обликом ликова и када је природни размак незгодан.
Погледајте Пен СВГ Тект Лоцкуп - Корак 2, Геофф Грахам (@геоффграхам) на ЦодеПен-у.
Као је ознака такође прихвата и font-sizeатрибут који ради управо као што бисте очекивали: Промените величину текста. То можемо користити за прилагођавање текста где повећавање textLengthоставља превише или премало простора и lengthAdjustистискује ликове из удара.
У комбинацији заједно, ова три атрибута дају нам могућност креирања закључавања текста. Ево шта добијамо као резултат горе наведеног исечка са неким додатним ЦСС-ом за додатни стил:
Погледајте Пен СВГ Тект Лоцкуп, Геофф Грахам (@геоффграхам) на ЦодеПен.
Остала закључавања
О закључавању типова већ смо писали:
Тип закључавања је типографски дизајн где су речи и знакови врло специфично стилизовани и поређани. Као да је дизајн дословно закључан на месту.
СВГ је савршен за овакве ствари због начина на који им се мења величина. Текст унутар СВГ-а не преобликује се као што то ради ХТМЛ, он се скалира на јединствени начин на који то чини СВГ, што је често у савршеном омјеру слике у којем је дизајниран (иако то можете контролисати).
Дакле, ако дизајнирате овако нешто у софтверу за уређивање вектора, као што је Адобе Иллустратор:
Погледајте Пример оловке за закључавање текста Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.
Опширније.