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

В SVG.js текст можно не просто размещать как отдельный элемент, а привязывать его к сложным кривым и линиям с помощью тегов <textPath>. Это позволяет создавать надписи, следящие за контуром фигуры, например, по кругу, дуге или произвольной кривой.

Основные элементы и методы

  1. Создание пути
const draw = SVG().addTo('body').size(600, 400);

// Создаем произвольный путь
const path = draw.path('M50,150 C150,50 350,250 450,150')
                 .fill('none')
                 .stroke({ width: 2, color: '#333' });
  • M50,150 — перемещение пера к начальной точке.
  • C150,50 350,250 450,150 — кубическая кривизна (cubic Bezier).

Метод .path() возвращает объект SVG.Path, с которым можно работать, изменяя форму и стиль линии.

  1. Создание текста и привязка к пути
const text = draw.text(function(add) {
  add.tspan('Текст вдоль кривой SVG.js');
});

text.path(path);
  • Метод .path() указывает путь, вдоль которого будет следовать текст.
  • Текст автоматически размещается по центру пути. Для более точной настройки используется атрибут startOffset.
  1. Управление положением текста вдоль пути
text.path(path).attr({
  startOffset: '25%' // смещение текста относительно длины пути
});
  • startOffset может быть в процентах ('50%') или пикселях ('100px').
  • Позволяет сдвигать текст вперед или назад вдоль кривой.

Многострочный текст вдоль кривой

Для создания сложных надписей с несколькими строками используется объект tspan:

const multilineText = draw.text(function(add) {
  add.tspan('Первая строка').newLine();
  add.tspan('Вторая строка').newLine();
  add.tspan('Третья строка');
});

multilineText.path(path).attr({ startOffset: '0%' });
  • Метод .newLine() переносит текст на новую строку.
  • SVG.js корректно отображает несколько tspan на кривой, распределяя их вдоль пути.

Анимация текста вдоль пути

SVG.js позволяет анимировать движение текста вдоль кривой с помощью .animate():

text.path(path)
    .animate(5000, '<>')
    .attr({ startOffset: '100%' });
  • 5000 — продолжительность анимации в миллисекундах.
  • '<>' — тип easing (ускорение/замедление движения).
  • Текст будет двигаться от начала до конца кривой, создавая эффект бегущей строки по пути.

Изменение стиля текста

SVG.js поддерживает стандартные CSS-атрибуты для текста:

text.font({
  family: 'Arial',
  size: 24,
  anchor: 'middle', // центрирование вдоль пути
  weight: 'bold'
}).fill('#FF6600');
  • anchor — определяет точку привязки текста к пути (start, middle, end).
  • .fill() задает цвет текста.
  • Размер шрифта и начертание настраиваются через объект .font().

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

Текст можно менять в реальном времени:

text.clear().text('Новый текст вдоль кривой');
  • Метод .clear() удаляет все предыдущие tspan.
  • После обновления текста можно повторно вызвать .path(path) для сохранения привязки.

Путь также можно изменять динамически:

path.plot('M50,200 C150,100 350,300 450,200');
text.path(path); // текст автоматически обновит позицию
  • Метод .plot() задает новый SVG-путь.
  • Привязанный текст пересчитывает положение на кривой без необходимости пересоздавать элемент.

Использование кривых сложной формы

SVG.js позволяет работать с:

  • Кругами и эллипсами (draw.circle().path()).
  • Полилиниями (draw.polyline().path()).
  • Любым произвольным контуром (draw.path()).
const circle = draw.circle(200).move(100, 100);
text.path(circle);
  • Для окружностей и эллипсов текст плавно распределяется по контуру.
  • В комбинации с startOffset можно задавать точку начала текста.

Практические советы

  • Центрирование текста: лучше использовать anchor: 'middle' для симметричного размещения.
  • Производительность: избегать слишком сложных кривых с большим числом сегментов, если требуется анимация текста.
  • Масштабирование: текст сохраняет масштаб при изменении размеров SVG благодаря векторной природе.

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

Оглавление