Выравнивание текста

В Snap.svg работа с текстом осуществляется через элемент <text>, создаваемый методом paper.text(x, y, string). Этот элемент обладает множеством атрибутов, которые позволяют задавать позиционирование текста, его ориентацию и выравнивание по горизонтали и вертикали. Ключевым инструментом для управления расположением текста является метод .attr(), позволяющий задавать SVG-атрибуты text-anchor и dominant-baseline.

Горизонтальное выравнивание текста

Для горизонтального выравнивания текста в Snap.svg используется атрибут text-anchor. Он определяет точку привязки текста относительно координат (x, y). Возможные значения:

  • start — текст выравнивается по левому краю (по умолчанию).
  • middle — текст центрируется по горизонтали относительно координаты x.
  • end — текст выравнивается по правому краю.

Пример создания текста с центровкой по горизонтали:

var paper = Snap(500, 200);
var text = paper.text(250, 100, "Центрированный текст");
text.attr({
    "text-anchor": "middle",
    "font-size": 24,
    "fill": "#333"
});

В этом примере текст располагается строго по центру холста по оси X. Использование text-anchor особенно полезно при динамическом изменении размеров текста или при создании графических элементов с точным позиционированием.

Вертикальное выравнивание текста

Вертикальное выравнивание управляется атрибутом dominant-baseline. Этот атрибут определяет, какая часть текста будет ориентирована по координате y. Основные значения:

  • auto — используется стандартное поведение браузера.
  • middle — центр текста по вертикали.
  • hanging — верхняя линия текста ориентируется по координате y.
  • alphabetic — базовая линия текста ориентируется по координате y (часто используется по умолчанию).
  • ideographic — линия для идеографических символов.

Пример вертикального центрирования текста:

var paper = Snap(500, 200);
var text = paper.text(250, 100, "Вертикально центрированный");
text.attr({
    "text-anchor": "middle",
    "dominant-baseline": "middle",
    "font-size": 24,
    "fill": "#007ACC"
});

Использование dominant-baseline: middle позволяет точно выравнивать текст относительно визуального центра, что особенно важно при создании диаграмм, графиков или интерфейсных элементов.

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

Snap.svg не имеет прямой поддержки <tspan> с автоматическим переносом строк, но можно создавать многострочный текст вручную, добавляя отдельные <tspan> для каждой строки. Выравнивание каждой строки контролируется через x и dy:

var paper = Snap(400, 200);
var text = paper.text(200, 50, "").attr({
    "text-anchor": "middle",
    "dominant-baseline": "middle",
    "font-size": 20
});

text.add(Snap.parse("<tspan x='200' dy='0'>Первая строка</tspan>"));
text.add(Snap.parse("<tspan x='200' dy='24'>Вторая строка</tspan>"));
text.add(Snap.parse("<tspan x='200' dy='24'>Третья строка</tspan>"));

Каждая новая строка смещается относительно предыдущей с помощью атрибута dy. Выравнивание по центру сохраняется за счёт одинакового значения x и атрибута text-anchor: middle.

Влияние трансформаций на выравнивание текста

Трансформации, такие как масштабирование, поворот или сдвиг, могут изменять видимое выравнивание текста. В Snap.svg текстовые элементы поддерживают метод .transform(), который позволяет комбинировать несколько трансформаций:

var text = paper.text(250, 100, "Повернутый текст");
text.attr({
    "text-anchor": "middle",
    "dominant-baseline": "middle",
    "font-size": 24
});
text.transform("r45"); // Поворот на 45 градусов вокруг точки (250,100)

После применения поворота центрирование текста сохраняется, если используется комбинация text-anchor: middle и dominant-baseline: middle. При сложных трансформациях рекомендуется рассчитывать координаты текста заранее, чтобы сохранить правильное визуальное выравнивание.

Использование классов и стилей CSS для текста

Snap.svg позволяет использовать CSS-классы для управления внешним видом текста и его выравниванием. Атрибуты class и style применяются к элементу текста так же, как и к обычным SVG:

var text = paper.text(250, 100, "Стилизация через CSS");
text.attr({
    "class": "custom-text"
});

И в CSS:

.custom-text {
    font-size: 22px;
    fill: #FF5722;
    text-anchor: middle;
    dominant-baseline: middle;
}

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

Практические рекомендации

  • Всегда использовать text-anchor и dominant-baseline для точного позиционирования текста, особенно при динамическом изменении размеров холста.
  • Для многострочного текста применять <tspan> с x и dy, чтобы сохранить консистентное выравнивание.
  • При трансформациях учитывать центр вращения и масштабирования, чтобы выравнивание оставалось визуально корректным.
  • Использование CSS-классов упрощает поддержку и изменение стилей текста на больших проектах.

Выравнивание текста в Snap.svg — это комбинация правильного использования атрибутов text-anchor и dominant-baseline, грамотного построения многострочных элементов и учёта трансформаций, что обеспечивает точное позиционирование текста в любых графических интерфейсах.

Оглавление