Шрифты и начертания

SVG.js предоставляет мощный и гибкий инструментарий для создания и управления текстовыми элементами SVG. Текст в SVG создается с помощью объекта Text, который позволяет добавлять строки, устанавливать шрифты, размеры, начертания и управлять позиционированием.

const draw = SVG().addTo('body').size(600, 400);

const text = draw.text('Пример текста');
text.move(50, 50);

Метод text() создаёт элемент <text> в SVG, а move(x, y) задаёт его позицию.

Установка шрифта

Шрифт задается с помощью метода font(), который принимает объект с параметрами:

  • family — семейство шрифта ('Arial', 'Verdana', 'Times New Roman' и др.).
  • size — размер шрифта (в пикселях или с указанием единицы измерения).
  • weight — толщина шрифта ('normal', 'bold', числовые значения 100–900).
  • style — стиль шрифта ('normal', 'italic', 'oblique').
  • anchor — выравнивание текста ('start', 'middle', 'end').

Пример:

text.font({
  family: 'Verdana',
  size: 24,
  weight: 'bold',
  style: 'italic',
  anchor: 'middle'
});

Ключевой момент: метод font() позволяет комбинировать все параметры шрифта в одном объекте, что упрощает настройку текста.

Различные начертания текста

SVG поддерживает стандартные варианты начертания текста, которые в SVG.js задаются через свойства weight и style.

Толщина шрифта (weight)

  • 'normal' — стандартная толщина
  • 'bold' — полужирное начертание
  • Числа 100, 200, …, 900 — градация толщины (100 — очень тонкий, 900 — очень жирный)
text.font({ weight: 300 }); // тонкий текст
text.font({ weight: 700 }); // жирный текст

Стиль шрифта (style)

  • 'normal' — обычный текст
  • 'italic' — курсив
  • 'oblique' — наклонное начертание
text.font({ style: 'italic' });

Многострочный текст

SVG.js позволяет создавать многострочные тексты с помощью метода text() и символа перевода строки \n:

const multiLineText = draw.text('Первая строка\nВторая строка\nТретья строка');
multiLineText.font({ size: 20, family: 'Arial' });
multiLineText.move(50, 100);

Каждая строка автоматически позиционируется с вертикальным интервалом, зависящим от высоты шрифта. Для точного контроля можно использовать метод leading():

multiLineText.leading(1.5); // множитель высоты строки

Цвет и прозрачность текста

Цвет текста задается методом fill():

text.fill('#ff0000'); // красный
text.fill({ color: '#00ff00', opacity: 0.7 }); // зеленый с прозрачностью

Метод stroke() позволяет добавить обводку к буквам:

text.stroke({ color: '#0000ff', width: 1 });

Преобразования и выравнивание

Текст можно масштабировать, вращать и смещать с помощью методов scale(), rotate(), translate():

text.rotate(45, 100, 50); // поворот на 45° вокруг точки (100, 50)
text.scale(1.5);           // увеличение размера на 50%
text.translate(20, 30);    // смещение на (20, 30)

Выравнивание текста управляется свойством anchor:

  • 'start' — по левому краю
  • 'middle' — по центру
  • 'end' — по правому краю
text.font({ anchor: 'end' });

Текст вдоль пути

SVG.js поддерживает текст вдоль кривой или линии. Для этого создается элемент <path> и связывается с текстом методом textPath():

const path = draw.path('M10 80 C 40 10, 65 10, 95 80');
const curvedText = draw.text('Текст по кривой');
curvedText.path(path).font({ size: 18 });

Ключевой момент: path() внутри текста связывает текст с кривой, позволяя создавать эффекты, недоступные обычному <text>.

Работа с символами и буквами

Методы tspan() и plain() позволяют детально управлять отдельными символами:

const t = draw.text('').move(50, 150);
t.tspan('Красный').fill('red').font({ weight: 'bold' });
t.tspan(' и ').fill('black');
t.tspan('Синий').fill('blue').font({ style: 'italic' });

tspan() создает отдельные подэлементы <tspan>, каждый из которых можно стилизовать независимо.

Использование веб-шрифтов

SVG.js поддерживает подключение веб-шрифтов через CSS. Для этого достаточно задать family соответствующего шрифта, подключенного на странице через <link> или @font-face:

text.font({ family: 'Roboto', size: 22 });

Интерактивность текста

Текстовые элементы можно делать интерактивными, используя события:

text.on('mouseover', () => text.fill('orange'));
text.on('mouseout', () => text.fill('black'));

Это позволяет создавать динамические подписи, подсветку текста и визуальные эффекты при взаимодействии пользователя.

Итоговый контроль

SVG.js объединяет все инструменты для текста в единой цепочке методов, позволяя:

  • управлять шрифтами и начертаниями;
  • работать с многострочными текстами;
  • создавать текст по кривой;
  • применять стили к отдельным символам;
  • делать текст интерактивным и анимированным.

Комбинация font(), fill(), stroke(), tspan() и методов трансформации позволяет создавать сложные и настраиваемые текстовые графики в SVG.

Оглавление