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 textLengthun tiek izmantots teksta paplašināšanas vai saspiešanas veids, lai tas atbilstu šai vietai. Noklusējuma vērtība ir tā, spacingkas saglabā burtu formas, bet pielāgo atstarpes starp rakstzīmēm. Mēs varam to izmantot, spacingAndGlyphsun 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-sizeatribū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 textLengthatstāj pārāk daudz vai pārāk maz vietas un lengthAdjustdeformē 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.