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

В библиотеке SVG.js работа с текстом расширяется за счёт элемента <tspan>, который позволяет управлять отдельными строками и сегментами текста внутри одного текстового объекта. <tspan> предоставляет возможность форматирования, позиционирования и стилизации отдельных частей текста, сохраняя их внутри общего контейнера <text>.

Основные методы для работы с <tspan>

  1. Добавление нового tspan Метод .tspan() позволяет создавать отдельный сегмент текста внутри <text>. Он возвращает объект Tspan, на котором можно применять индивидуальные стили и атрибуты.

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

const text = draw.text('Первая строка');
const tspan = text.tspan('Вторая строка');

    Здесь tspan создаёт новую строку внутри текста. По умолчанию все tspan наследуют стили родительского <text>.

  2. Управление содержимым tspan Для изменения текста внутри tspan используется метод .text():

    tspan.text('Изменённая строка');

  3. Разделение текста на строки Для многострочного текста удобно использовать массив или добавление нескольких tspan:

    const lines = ['Первая строка', 'Вторая строка', 'Третья строка'];
const text = draw.text('');

lines.forEach(line => {
  text.tspan(line).newLine();
});

    Метод .newLine() автоматически сдвигает текущий tspan вниз, создавая визуальное разделение строк.

Позиционирование и смещение

<tspan> поддерживает атрибуты x, y, dx, dy для точного позиционирования:

  • x и y задают абсолютные координаты начала текста.
  • dx и dy добавляют смещение относительно текущей позиции.
text.tspan('Смещение вправо').dx(20);
text.tspan('Смещение вниз').dy(30);

Для нескольких tspan можно комбинировать эти методы, создавая сложные макеты текста.

Форматирование отдельных строк

Каждый tspan можно стилизовать независимо:

text.tspan('Красная строка').fill('#ff0000').font({ size: 20, weight: 'bold' });
text.tspan('Синяя строка').fill('#0000ff').font({ size: 16, style: 'italic' });
  • fill() задаёт цвет текста.
  • font() управляет размером, начертанием, наклоном и семейством шрифта.

Можно применять CSS-свойства через .attr():

text.tspan('Подчёркнутый текст').attr({ 'text-decoration': 'underline' });

Вложенные tspan

SVG.js позволяет создавать tspan внутри tspan для дополнительного контроля сегментов:

const parent = text.tspan('Родитель: ');
parent.tspan('Вложенный').fill('green').font({ weight: 'bold' });

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

Динамическое управление многострочным текстом

  1. Добавление строк по условию
const lines = ['Строка 1', 'Строка 2', 'Строка 3'];
const text = draw.text('');

lines.forEach((line, index) => {
  text.tspan(line).dy(index ? 20 : 0); // dy для всех кроме первой строки
});
  1. Изменение отдельных строк
text.children()[1].text('Обновлённая строка'); // изменяет вторую строку
  1. Удаление tspan
text.children()[0].remove(); // удаляет первую строку

Применение многострочного текста на практике

  • Подписи к графикам: отдельные линии с разными стилями.
  • Информационные блоки: цветовое выделение отдельных слов.
  • Анимация текста: можно анимировать tspan отдельно, изменяя прозрачность, цвет или положение.
const t1 = text.tspan('Первая строка');
const t2 = text.tspan('Вторая строка');

t2.animate(1000).dy(50).loop();

Ключевые моменты работы с <tspan> в SVG.js

  • .tspan() создаёт отдельный сегмент текста.
  • .newLine() сдвигает tspan вниз для многострочности.
  • .dx() и .dy() позволяют задавать относительные смещения.
  • Каждый tspan можно стилизовать отдельно через .fill(), .font() или .attr().
  • Вложенные tspan наследуют свойства родителя, но допускают переопределение.
  • Управление массивом tspan через children() даёт гибкость динамического редактирования текста.

Эти возможности делают <tspan> мощным инструментом для построения сложных текстовых макетов в SVG с полной поддержкой JavaScript и библиотекой SVG.js.

Оглавление