Мы можем тек- по изогнутой линии с тремя инструментами , встроенными прямо в SVG: , и .
Фрагмент
Dangerous Curves Ahead Как мы туда попали
Представьте, что мы рисуем изогнутую линию в SVG и присваиваем ей идентификатор с именем curve.
См. Pen NgwPYB Джеффа Грэма (@geoffgraham) на CodePen.
Затем мы перетаскиваем контент в SVG с помощью тега и присваиваем ему ширину, соответствующую viewBoxразмерам SVG . Мы пока ничего не увидим, но знаем, что текст где-то за кадром.
Посмотрите Pen ZyaYOw Джеффа Грэма (@geoffgraham) на CodePen.
Мы действительно хотим увидеть этот текст. Мы можем обернуть наш текст в тег и настроить его так, чтобы он соответствовал линиям нашего изогнутого пути, вызвав идентификатор пути, который мы установили ранее.
Посмотрите Pen Kqywpe Джеффа Грэма (@geoffgraham) на CodePen.
Теперь готовим на газе!
Мы не хотим, чтобы эта кривая была видна, поэтому давайте сделаем путь прозрачной заливкой. Мы также могли бы сделать это в CSS, но мы применяем это прямо в разметке SVG для этого примера.
См. Pen xrPbgx Джеффа Грэма (@geoffgraham) на CodePen.
Остальное - CSS! Точный размер шрифта будет зависеть от самого текста и от того, какое семейство шрифтов используется, но, как только вы добьетесь правильного баланса, SVG сам будет обрабатывать отзывчивость и гарантировать, что все остается на кривой в любом масштабе.
См. SVG-текст Pen по изогнутому пути Джеффа Грэма (@geoffgraham) на CodePen.
Мы могли бы применить этот же метод к любому типу изогнутого пути.
См. SVG-текст Pen по изогнутому пути Джеффа Грэма (@geoffgraham) на CodePen.