The Cat in the Hat SVG bietet das Tag an. Während es in HTML ähnlich wie normal funktioniert , akzeptiert es Attribute, die leistungsstarke Textformungsfunktionen freischalten.
Eines dieser Attribute ist textLength. Wenn wir dies auf setzen 100, wird der eingewickelte Text auf die volle Länge des SVG-Containers gezwungen.
Siehe den Stift SVG Text Lockup - Schritt 1 von Geoff Graham (@geoffgraham) auf CodePen.
Ein weiteres dieser Attribute ist lengthAdjust. Dies gilt nur, wenn (oder ) eine Menge hat textLengthund die Art und Weise behandelt, wie der Text erweitert oder komprimiert wird, um in diesen Bereich zu passen. Der Standardwert ist, spacingder die Buchstabenformen beibehält, aber die Lücken zwischen den Zeichen anpasst. Wir können spacingAndGlyphsstattdessen verwenden und das wird das Erweitern oder Komprimieren der Form der Zeichen auch anpassen, wenn der natürliche Abstand unangenehm ist.
Siehe den Stift SVG Text Lockup - Schritt 2 von Geoff Graham (@geoffgraham) auf CodePen.
Wie das Tag akzeptiert auch ein font-sizeAttribut, das genau das tut, was Sie vielleicht erwarten: Ändern Sie die Größe des Textes. Wir können dies verwenden, um Anpassungen am Text vorzunehmen, bei denen das Erhöhen textLengthzu viel oder zu wenig Platz lässt und lengthAdjustdie Zeichen aus dem Gleichgewicht bringt.
Zusammen ergeben diese drei Attribute die Möglichkeit, Textsperren zu erstellen. Folgendes erhalten wir als Ergebnis des obigen Snippets mit zusätzlichem CSS für zusätzliches Styling:
Siehe die Pen SVG Text Lockup von Geoff Graham (@geoffgraham) auf CodePen.
Andere Überbrückungen
Wir haben bereits über Typensperrungen geschrieben:
Eine Typensperre ist ein typografisches Design, bei dem die Wörter und Zeichen sehr spezifisch gestaltet und angeordnet sind. Als ob das Design buchstäblich fixiert ist.
SVG ist aufgrund der Größenänderung perfekt für diese Art von Dingen geeignet. Text in SVG fließt nicht wie HTML-Texte zurück, sondern skaliert auf einzigartige Weise wie SVG, was häufig das perfekte Seitenverhältnis aufweist, mit dem es entworfen wurde (obwohl Sie dies steuern können).
Wenn Sie also so etwas in einer Vektorbearbeitungssoftware wie Adobe Illustrator entwerfen:
Siehe das Stiftbeispiel einer Textsperre von Chris Coyier (@chriscoyier) auf CodePen.
Weiterlesen.