The Cat in the Hat
SVG piedāvā tagu. Lai gan tas darbojas daudz kā parasts
HTML, tas pieņem atribūtus, kas paver jaudīgas teksta veidošanas iespējas.
Viens no šiem atribūtiem ir textLength
. Ja mēs to iestatīsim uz 100
, iesaiņotais teksts tiks piespiests visā SVG konteinera garumā.
Skatiet Geoff Graham (@geoffgraham) pildspalvas SVG teksta bloķēšanu - CodePen.
Vēl viens no šiem atribūtiem ir lengthAdjust
. Tas attiecas tikai uz gadījumiem, kad (vai
) ir iestatīts komplekts
textLength
un tiek izmantots teksta paplašināšanas vai saspiešanas veids, lai tas atbilstu šai vietai. Noklusējuma vērtība ir tā, spacing
kas saglabā burtu formas, bet pielāgo atstarpes starp rakstzīmēm. Mēs varam to izmantot, spacingAndGlyphs
un tas koriģēs arī rakstzīmju formas saspiešanas paplašināšanu, ja dabiskais atstarpe ir neērta.
Skatiet Geoff Graham (@geoffgraham) pildspalvas SVG teksta bloķēšanu - CodePen.
Tāpat kā
atzīme pieņem arī
font-size
atribūtu, kas darbojas tieši tā, kā jūs varētu gaidīt: mainiet teksta lielumu. Mēs varam to izmantot, lai pielāgotu tekstu, kur palielinot textLength
atstāj pārāk daudz vai pārāk maz vietas un lengthAdjust
deformē rakstzīmes.
Kopā šie trīs atribūti dod mums iespēju izveidot teksta bloķēšanu. Lūk, ko mēs iegūstam iepriekš minētā fragmenta rezultātā, izmantojot papildu CSS papildu stilam:
Skatiet Geoff Graham (@geoffgraham) Pen SVG teksta bloķēšanu vietnē CodePen.
Citi bloķētāji
Mēs jau iepriekš rakstījām par tipa bloķēšanu:
Tipa bloķēšana ir tipogrāfisks dizains, kurā vārdi un rakstzīmes ir veidoti un sakārtoti ļoti specifiski. Tāpat kā dizains ir burtiski bloķēts vietā.
SVG ir ideāli piemērots šāda veida lietām, pateicoties tā izmēram. Teksts SVG iekšpusē neatkārtojas kā HTML veids, tas tiek mērogots unikālā veidā, kā to dara SVG, kas bieži vien ir ar perfektu malu attiecību, kādā tas tika izstrādāts (lai gan jūs to varat kontrolēt).
Tātad, ja jūs izstrādājat kaut ko līdzīgu vektoru rediģēšanas programmatūrā, piemēram, Adobe Illustrator:



Skatiet Krisa Koijera (@chriscoyier) teksta bloķēšanas pildspalvas piemēru vietnē CodePen.
Lasīt vairāk.