Создание и форматирование текста

Для работы с текстом в SVG.js используется метод text(), который позволяет создавать текстовые элементы и управлять их содержимым. Базовый синтаксис:

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

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

Метод text() возвращает объект SVG.Text, предоставляющий широкий набор методов для форматирования и позиционирования текста.

Форматирование текста

1. Размер и шрифт

Для изменения шрифта и размера используется метод font() с объектом настроек:

text.font({
  family: 'Arial',
  size: 24,
  weight: 'bold',
  style: 'italic',
  anchor: 'middle',
  leading: 1.5
});
  • family — имя шрифта ('Arial', 'Times New Roman' и др.)
  • size — размер текста в пикселях
  • weight — толщина шрифта ('normal', 'bold')
  • style — стиль ('normal', 'italic')
  • anchor — выравнивание текста относительно координат ('start', 'middle', 'end')
  • leading — межстрочный интервал

2. Цвет и заливка

Цвет текста задается через fill():

text.fill('#FF5733'); // Цвет в формате HEX

Можно использовать и прозрачность:

text.fill({ color: '#000000', opacity: 0.7 });

3. Обводка текста

Для создания контура вокруг текста применяется stroke():

text.stroke({ color: '#000000', width: 2, linecap: 'round' });
  • color — цвет обводки
  • width — толщина линии
  • linecap — стиль окончания линии ('round', 'square', 'butt')

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

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

const multiline = draw.text('Первая строка\nВторая строка\nТретья строка');
multiline.font({ size: 18, leading: 1.6 });

Метод leading управляет расстоянием между строками, позволяя создавать аккуратные блоки текста.

Динамический текст

Текст можно менять динамически с помощью метода text() или plain():

text.text('Новый текст'); // полностью заменяет содержимое
text.plain('Только текст, без HTML-разметки');

Разница между text() и plain() заключается в поддержке HTML-подобной разметки: text() позволяет использовать для стилизации отдельных частей текста.

Использование для сложного форматирования

Метод tspan() позволяет создавать подстроки с индивидуальными свойствами внутри одного текстового элемента:

const complexText = draw.text(function(add) {
  add.tspan('Красный').fill('#FF0000');
  add.tspan(' и ').fill('#000000');
  add.tspan('синий').fill('#0000FF').font({ weight: 'bold' });
});
  • Каждая подстрока (tspan) может иметь отдельный цвет, шрифт и размер
  • Можно комбинировать стили внутри одного текста

Трансформация текста

Текстовые элементы SVG.js поддерживают все трансформации:

text.rotate(45, 100, 100); // Поворот на 45° вокруг точки (100, 100)
text.scale(1.5, 1.5); // Масштабирование
text.translate(50, 30); // Смещение

Трансформации позволяют создавать сложные графические эффекты и анимации текста без изменения исходного содержимого.

Анимация текста

SVG.js интегрирует анимацию текста через animate():

text.animate(2000).fill('#00FF00').move(200, 100);
  • Время анимации задается в миллисекундах
  • Можно одновременно изменять цвет, позицию, размер и другие свойства

Для более сложных анимаций используется цепочка методов:

text.animate(1000, '<>').rotate(360).animate(1000, '<>').rotate(0);

Выравнивание и позиционирование

Методы cx(), cy(), x(), y() управляют координатами текста:

text.cx(300).cy(200); // Центр текста в точке (300, 200)
text.x(50).y(100); // Верхний левый угол текста
  • anchor в font() дополнительно влияет на точку отсчета
  • Можно комбинировать с трансформациями для точного позиционирования

Работа с длинными текстами и обтеканием

SVG.js не поддерживает автоматический перенос текста по ширине контейнера, но можно реализовать вручную:

function wrapText(textElement, maxWidth) {
  const words = textElement.text().split(' ');
  let line = '';
  textElement.clear();

  words.forEach((word) => {
    const tspan = textElement.tspan(line + word + ' ').attr({ x: 0, dy: '1.2em' });
    if (tspan.length() > maxWidth) {
      line = word + ' ';
      textElement.tspan(line).attr({ x: 0, dy: '1.2em' });
    } else {
      line += word + ' ';
    }
  });
}

Такой подход позволяет разбивать длинные строки на несколько для корректного отображения текста.

Оглавление