The Cat in the Hat SVG предлагает тег. Хотя он во многом работает как обычный HTML, он принимает атрибуты, открывающие мощные возможности формирования текста.
Один из этих атрибутов textLength. Если мы установим это значение 100, то обернутый текст будет принудительно занимать всю длину контейнера SVG.
См. Блокировку текста SVG Pen - Шаг 1 от Джеффа Грэма (@geoffgraham) на CodePen.
Еще один из этих атрибутов lengthAdjust. Это применимо только тогда, когда (или ) имеет набор textLengthи обрабатывает способ расширения или сжатия текста, чтобы он уместился в этом пространстве. Значение по умолчанию - spacingсохраняет формы букв, но регулирует промежутки между символами. Мы можем использовать spacingAndGlyphsвместо этого, и это будет регулировать расширение или сжатие формы символов, когда естественный интервал неудобен.
См. Блокировку текста SVG Pen - Шаг 2 от Джеффа Грэма (@geoffgraham) на CodePen.
Например , тег также принимает font-sizeатрибут, который делает именно то, что вы могли ожидать: изменяет размер текста. Мы можем использовать это, чтобы внести изменения в текст, где увеличение textLengthоставляет слишком много или слишком мало места и lengthAdjustискажает символы.
В совокупности эти три атрибута дают нам возможность создавать блокировку текста. Вот что мы получаем в результате приведенного выше фрагмента с некоторым дополнительным CSS для дополнительного стиля:
См. Блокировку текста SVG Pen от Джеффа Грэма (@geoffgraham) на CodePen.
Другие блокировки
Мы уже писали о блокировках типов:
Блокировка шрифтов - это типографский дизайн, в котором слова и символы оформлены и расположены очень специфично. Вроде дизайн буквально зафиксирован на месте.
SVG идеально подходит для такого рода вещей из-за способа изменения размера. Текст внутри SVG не перекомпонован, как в HTML, он масштабируется уникальным образом, как это делает SVG, который часто имеет идеальное соотношение сторон, для которого он был разработан (хотя вы можете это контролировать).
Итак, если вы создаете что-то подобное в программе для редактирования векторных изображений, такой как Adobe Illustrator:
См. Пример пера с блокировкой текста Криса Койера (@chriscoyier) на CodePen.
Прочитайте больше.