Создание текстовых элементов

Snap.svg предоставляет мощные инструменты для работы с текстом в SVG, позволяя создавать, стилизовать и управлять текстовыми элементами с помощью JavaScript. Основным методом для создания текста является text(), который позволяет размещать текст в заданной позиции на холсте SVG.

var s = Snap(800, 600);
var t = s.text(100, 100, "Привет, Snap.svg!");

В данном примере создаётся текстовый элемент на координатах (100, 100) с содержимым "Привет, Snap.svg!". Метод возвращает объект Element, который можно далее модифицировать и стилизовать.

Настройка атрибутов текста

Для управления визуальными характеристиками текста используются атрибуты SVG. В Snap.svg они задаются через метод attr():

t.attr({
    "font-size": 30,
    "font-family": "Arial, sans-serif",
    "fill": "#3498db",
    "text-anchor": "middle"
});

Основные атрибуты текста:

  • font-size — размер шрифта в пикселях или других единицах.
  • font-family — шрифт текста, поддерживается множественный выбор через запятую.
  • fill — цвет заливки текста.
  • stroke — цвет обводки текста.
  • stroke-width — толщина линии обводки.
  • text-anchor — выравнивание текста относительно координат (start, middle, end).

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

SVG не поддерживает перенос строк в одном элементе text напрямую, поэтому для многострочного текста используют несколько элементов tspan:

var t = s.text(100, 100, "");
t.append(Snap.parse("<tspan x='100' y='100'>Первая строка</tspan>"));
t.append(Snap.parse("<tspan x='100' y='130'>Вторая строка</tspan>"));

Особенности tspan:

  • Позволяет создавать независимые строки с разными координатами.
  • Можно задавать отдельные стили для каждой строки.
  • Поддерживает атрибут dy для смещения относительно предыдущей строки, что упрощает вертикальное выравнивание.

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

Snap.svg позволяет изменять текстовое содержимое уже существующего элемента с помощью метода attr() или свойства node.textContent:

t.attr({ text: "Новый текст" });
// или
t.node.textContent = "Новый текст";

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

Работа с позиционированием

Координаты текста задаются параметрами x и y. Для более точного позиционирования можно использовать dx и dy у отдельных tspan:

var t = s.text(50, 50, "");
t.append(Snap.parse("<tspan x='50' y='50'>Первая строка</tspan>"));
t.append(Snap.parse("<tspan dx='0' dy='20'>Вторая строка с отступом</tspan>"));
  • dx — горизонтальное смещение относительно текущей позиции.
  • dy — вертикальное смещение относительно предыдущей строки.

Применение трансформаций к тексту

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

t.transform("rotate(45, 100, 100)");
t.transform("scale(2, 1)");
t.transform("translate(50, 50)");
  • rotate(angle, cx, cy) — вращение вокруг точки (cx, cy).
  • scale(sx, sy) — масштабирование по горизонтали и вертикали.
  • translate(tx, ty) — смещение по координатам.

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

t.transform("translate(50,50) rotate(30,100,100) scale(1.5)");

Стилизация с помощью CSS классов

Для удобного управления стилем текста можно использовать CSS-классы, назначаемые через метод addClass():

t.addClass("my-text");

В CSS:

.my-text {
    font-size: 24px;
    fill: #e74c3c;
    font-weight: bold;
}

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

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

Snap.svg поддерживает анимацию атрибутов текста через метод animate():

t.animate({ "fill": "#2ecc71", "font-size": 40 }, 1000, mina.easeinout);
  • Первый параметр — объект атрибутов для анимации.
  • Второй — длительность в миллисекундах.
  • Третий — функция интерполяции (mina.linear, mina.easein, mina.easeout, mina.easeinout).

Анимацию можно комбинировать с трансформациями, изменяя положение и масштаб текста одновременно с изменением цвета.

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

Snap.svg позволяет создавать текст вдоль кривой с использованием элемента <textPath>:

var path = s.path("M50,150 C150,50 350,250 450,150").attr({ fill: "none", stroke: "#000" });
var text = s.text(0, 0, "Текст по кривой");
var textPath = text.path(path);
  • Метод path() для текста привязывает его к существующему пути.
  • Позволяет реализовать криволинейные заголовки и декоративные эффекты.

Интерактивные текстовые элементы

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

t.click(function() {
    this.attr({ fill: "#f39c12" });
});
t.hover(
    function() { this.attr({ "font-size": 36 }); },
    function() { this.attr({ "font-size": 30 }); }
);
  • click() — срабатывает при клике по тексту.
  • hover() — два колбэка для наведения и ухода курсора.

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

  • Для многострочного текста лучше использовать комбинацию text и tspan, чтобы избежать проблем с переносом строк.
  • Использовать text-anchor для центрирования текста относительно координат, особенно при динамическом изменении длины строки.
  • Трансформации и анимации можно комбинировать, но важно контролировать порядок применения, так как SVG применяет их слева направо.
  • При работе с интерактивным текстом использовать отдельные классы и события, чтобы отделить логику и стиль.
Оглавление