The Cat in the Hat SVG oferuje tag. Chociaż działa podobnie jak normalny w HTML, akceptuje atrybuty, które odblokowują potężne możliwości kształtowania tekstu.
Jednym z tych atrybutów jest textLength. Jeśli ustawimy to na 100, wówczas zawijany tekst będzie zmuszony do pełnej długości kontenera SVG.
Zobacz blokadę tekstu SVG pióra - krok 1 autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Kolejnym z tych atrybutów jest lengthAdjust. Ma to zastosowanie tylko wtedy, gdy (lub ) ma zestaw textLengthi obsługuje sposób, w jaki tekst jest rozszerzany lub kompresowany w celu dopasowania do tego miejsca. Wartość domyślna to spacingzachowywanie kształtów liter, ale dostosowywanie odstępów między znakami. Możemy użyć spacingAndGlyphszamiast tego, a to dostosuje rozszerzenie lub kompresję kształtu znaków, jak również, gdy naturalne odstępy są niewygodne.
Zobacz blokadę tekstu SVG pióra - krok 2 autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Podobnie , znacznik przyjmuje również font-sizeatrybut, który działa dokładnie tak, jak można się spodziewać: zmienia rozmiar tekstu. Możemy to wykorzystać do wprowadzenia poprawek w tekście, gdzie zwiększenie textLengthpozostawia za dużo lub za mało miejsca i lengthAdjustwypacza postacie.
Połączone razem te trzy atrybuty dają nam możliwość tworzenia blokad tekstu. Oto, co otrzymujemy jako wynik powyższego fragmentu z dodatkowymi kodami CSS dla dodatkowego stylu:
Zobacz blokadę tekstu Pen SVG autorstwa Geoffa Grahama (@geoffgraham) na CodePen.
Inne blokady
Pisaliśmy już o blokowaniu typów:
Blokada czcionek to projekt typograficzny, w którym słowa i znaki są bardzo specyficznie stylizowane i ułożone. Jakby projekt był dosłownie zablokowany na miejscu.
Format SVG jest idealny do tego rodzaju rzeczy ze względu na sposób, w jaki zmienia rozmiar. Tekst wewnątrz SVG nie zmienia się jak w HTML, ale skaluje się w unikalny sposób, w jaki robi to SVG, który często ma idealny współczynnik proporcji, dla którego został zaprojektowany (chociaż możesz to kontrolować).
Więc jeśli projektujesz coś takiego w oprogramowaniu do edycji wektorów, takim jak Adobe Illustrator:
Zobacz przykład pióra blokowania tekstu autorstwa Chrisa Coyiera (@chriscoyier) w CodePen.
Czytaj więcej.