Ми можемо тек- по вигнутій лінії з трьома інструментами , вбудованими прямо в 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 заради цього прикладу.
Дивіться Pen xrPbgx від Geoff Graham (@geoffgraham) на CodePen.
Решта - CSS! Точний розмір шрифту буде залежати від самого тексту та того, яке сімейство шрифтів використовується, але, як тільки ви встановите правильний баланс, SVG сам обробляє відповідь і гарантує, що все залишається на кривій у будь-якому масштабі.
Дивіться текст SVG Pen по вигнутому шляху від Джеффа Грема (@geoffgraham) на CodePen.
Цей самий метод ми могли б застосувати до будь-якого типу криволінійного контуру.
Дивіться текст SVG Pen по вигнутому шляху від Джеффа Грема (@geoffgraham) на CodePen.