Текстовые элементы

В библиотеке SVG.js для создания текстовых элементов используется метод .text(), который позволяет вставлять как простые строки, так и HTML-подобное форматирование с использованием tspan. Текст создается внутри SVG-контейнера, который предварительно нужно создать через SVG():

const draw = SVG().addTo('body').size(600, 400);
const text = draw.text('Привет, SVG.js!');

Параметры метода .text() могут быть строкой или функцией, возвращающей строку. Функция позволяет динамически формировать содержимое текста на основе данных или состояния приложения.

Использование tspan для многострочного текста

Для создания многострочных текстов применяется вложенный элемент tspan. Он позволяет задавать отдельные стили и позиции для каждой строки текста:

const multiText = draw.text(function(add) {
    add.tspan('Первая строка').newLine();
    add.tspan('Вторая строка').fill('#ff0000');
    add.tspan('Третья строка').font({weight: 'bold'});
});

Метод .newLine() автоматически переносит следующую строку вниз, учитывая текущий размер шрифта. Каждый tspan можно стилизовать независимо, изменяя цвет, размер, начертание или положение.

Настройка шрифта и стилей текста

Библиотека предоставляет мощный набор методов для стилизации текста:

  • .font() — задает свойства шрифта: размер, семейство, стиль, вес, кернинг и т. д.
  • .fill() — изменяет цвет текста.
  • .stroke() — добавляет обводку вокруг букв.
  • .letterSpacing() и .wordSpacing() — регулируют межбуквенный и межсловный интервал.

Пример применения всех настроек:

text.font({
    family: 'Arial',
    size: 24,
    weight: 'bold',
    style: 'italic'
}).fill('#007acc')
  .stroke({ color: '#000000', width: 1 });

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

Текстовые элементы можно перемещать, вращать и масштабировать с помощью методов трансформации:

  • .move(x, y) — задает позицию текста.
  • .center(cx, cy) — центрирует текст относительно указанных координат.
  • .rotate(angle, cx, cy) — вращает текст вокруг точки (cx, cy).
  • .scale(sx, sy, cx, cy) — масштабирует текст относительно точки.
text.move(100, 50).rotate(45).scale(1.5, 1.5);

Для многострочного текста каждый tspan позиционируется относительно родительского текста, что позволяет создавать сложные компоновки.

Работа с обрезкой и масками текста

SVG.js поддерживает использование масок и клипов для текста. Это позволяет создавать эффекты обтекания или показывать текст только в заданной области:

const mask = draw.rect(200, 50).fill('#fff');
const maskedText = draw.text('Текст с маской').fill('#000');
maskedText.maskWith(mask);

Клипы (clipWith) работают аналогично и позволяют вырезать видимую область текста по форме SVG-объекта.

Анимация текстовых элементов

Анимации текста реализуются с помощью метода .animate(). Можно изменять позицию, цвет, размер или непрозрачность текста:

text.animate(2000, '<>').move(300, 200).fill('#ff6600');

Для более сложной анимации можно комбинировать .tspan() с анимациями отдельных строк, создавая эффект появления текста по буквам или строкам.

Динамическое обновление текста

Метод .text() может вызываться повторно для изменения содержимого текста после его создания:

text.text('Обновленный текст');

Использование функции позволяет автоматически обновлять текст при изменении данных:

let counter = 0;
setInterval(() => {
    text.text(() => `Счет: ${counter++}`);
}, 1000);

Взаимодействие текста с событиями

Текстовые элементы поддерживают стандартные события SVG:

  • .click(handler) — клик по тексту.
  • .mouseover(handler) и .mouseout(handler) — наведение мыши.
  • .dblclick(handler) — двойной клик.
text.click(() => {
    text.fill({ color: '#ff0000' });
});

С помощью событий можно реализовать интерактивные подписи, подсветку текста или анимацию при наведении.

Работа с текстовыми путями

SVG.js позволяет привязывать текст к кривой или пути с помощью метода .pathText() через расширение плагинов. Текст повторяет форму линии, что используется для арок, кривых и декоративных надписей.

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

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

Итоговая структура управления текстом

Основная структура работы с текстом в SVG.js сводится к следующим блокам:

  1. Создание текста через .text().
  2. Использование tspan для многострочных и стилизованных строк.
  3. Применение шрифтов и стилей через .font(), .fill(), .stroke().
  4. Трансформация и позиционирование через .move(), .rotate(), .scale().
  5. Применение масок и клипов для обрезки текста.
  6. Анимация и динамическое обновление текста.
  7. Взаимодействие с событиями мыши и клавиатуры.
  8. Привязка текста к кривым и путям для декоративных решений.

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

Оглавление