Що таке svg? Пишемо текст.

Відео: Починаємо писати реп тексти. Рими, сенс

В SVG крім відтворення якихось фігур ми, також, можемо писати текст. Ось про те, як писати текст на SVG, ми і поговоримо в цій статті.

Щоб написати текст в SVG, досить використовувати тег text.

Відео: SVG Text To FreeCAD Part

атрибути x і y задають початкову точку, від якої піде текст.

Текст можна стилізувати за допомогою css. Як це робити було розглянуто в попередній статті.

Відео: Як навчитися писати тексти з нуля? Відповідь в чотирьох відео

Якщо ми хочемо, щоб в html у якоїсь ділянки тексту були свої стилі, то обертаємо його в тег span. В SVG таке теж можливо, але тег називається tspan.

Відео: ЯК РОБИТИ ТЕКСТ ДЛЯ репу ЗА 7 ХВИЛИН (надкорисну туторіал)

Щоб змінити напрямок тексту, пропишемо стиль writing-mode.

Але працює це тільки в Internet Explorer.

В SVG ми можемо обвести текст за допомогою stroke для створення знаменитого ефекту.

Тепер розглянемо, як ставити градієнти в SVG.

Щоб створити градієнт, потрібно використовувати тег linearGradient всередині тега defs. У стилях ми задаємо колір, а в offset вказуємо звідки і куди йти градієнту. У нашому випадку зліва направо, від самого початку до самого кінця тексту. Потім, щоб прив`язати створений нами градієнт, ми в властивості fill пишемо url (), а всередині id, який вказали в тезі linearGradient. За допомогою атрибутів x1, x2, y1 і y2 можна вказувати напрямок тексту.

Якщо вам потрібен радіальний градієнт, то використовуйте тег radialGradient.

І на завершення розглянемо, як поміняти траєкторію тексту в SVG.

У тезі path, в атрибуті d, ми вказуємо координати кривої Безьє. Також, не забуваємо вказати id, який потім прив`язуємо до нашого тексту в тезі textPath.

Отже, на цьому все. Сьогодні ви дізналися, як використовувати текст в SVG.