The Cat in the Hat SVG erbjuder taggen. Medan den fungerar mycket som en normal i HTML accepterar den attribut som låser upp kraftfulla textformningsfunktioner.
En av dessa attribut är textLength. Om vi ställer in detta 100kommer texten som slås in tvingas till hela längden på SVG-behållaren.
Se Pen SVG Text Lockup - Steg 1 av Geoff Graham (@geoffgraham) på CodePen.
En annan av dessa attribut är lengthAdjust. Detta gäller bara när (eller ) har en uppsättning textLengthoch hanterar hur texten expanderas eller komprimeras för att passa det utrymmet. Standardvärdet är det spacingsom bevarar bokstavsformerna men justerar mellanrummen mellan tecken. Vi kan använda spacingAndGlyphsistället och det kommer att justera expandera eller komprimera karaktärernas form också för när det naturliga avståndet är besvärligt.
Se Pen SVG Text Lockup - Steg 2 av Geoff Graham (@geoffgraham) på CodePen.
Liksom , taggen accepterar också ett font-sizeattribut som gör exakt som du förväntar dig: ändra storleken på texten. Vi kan använda det för att göra justeringar i texten där ökande textLengthlämnar för mycket eller för lite utrymme och lengthAdjustvarpar karaktärerna ur smäll.
Kombinerat tillsammans ger dessa tre attribut oss möjlighet att skapa textlåsningar. Här är vad vi får som ett resultat av utdraget ovan med lite extra CSS för extra styling:
Se Pen SVG Text Lockup av Geoff Graham (@geoffgraham) på CodePen.
Andra lockups
Vi har skrivit om typlåsningar tidigare:
En typ låsning är en typografisk design där ord och tecken är utformade och ordnade mycket specifikt. Precis som designen är bokstavligen låst på plats.
SVG är perfekt för den här typen av saker på grund av hur den ändrar storlek. Text i SVG återflödar inte som typ i HTML, utan skalas på det unika sätt som SVG gör, vilket ofta är i det perfekta bildförhållandet det var designat på (även om du kan kontrollera det).
Så om du designar något liknande i vektorredigeringsprogramvara som Adobe Illustrator:
Se pennexemplet på en textlåsning av Chris Coyier (@chriscoyier) på CodePen.
Läs mer.