Ние можем да тече текст заедно извита линия с три инструмента вградени направо в SVG: , и .
Фрагментът
Dangerous Curves Ahead Как стигнахме там
Представете си, че чертаем крива линия в SVG и му даваме идентификатор, наречен curve.
Вижте Pen NgwPYB от Geoff Graham (@geoffgraham) на CodePen.
След това пускаме съдържание в SVG с помощта на маркера и му придаваме ширина, която съответства на viewBoxразмерите на SVG . Все още няма да видим нищо, но знаем, че текстът е някъде извън екрана.
Вижте Pen ZyaYOw от Geoff Graham (@geoffgraham) на CodePen.
Наистина искаме да видим този текст. Можем да увием текста си в маркера и да го настроим да следва линиите на кривата ни пътека, като извикаме идентификатора на пътя, който сме задали по-рано.
Вижте Pen Kqywpe от Geoff Graham (@geoffgraham) на CodePen.
Сега готвим с бензин!
Не искаме тази крива да се вижда, така че нека дадем на пътя прозрачно запълване. Бихме могли да направим това и в CSS, но го прилагаме вградено директно в SVG маркировката заради този пример.
Вижте писалката xrPbgx от Geoff Graham (@geoffgraham) на CodePen.
Останалото е CSS! Точният размер на шрифта ще зависи от самия текст и от това какво семейство шрифтове се използва, но щом постигнете правилния баланс, самият SVG ще се справи с реакцията и ще гарантира, че всичко остава на кривата във всякакъв мащаб.
Вижте текста на SVG по крива пътека от Geoff Graham (@geoffgraham) на CodePen.
Можем да приложим същия метод към всеки тип извита пътека.
Вижте текста на SVG по крива пътека от Geoff Graham (@geoffgraham) на CodePen.