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

В Snap.svg текстовые элементы создаются с помощью метода paper.text(x, y, content), где x и y — координаты точки привязки текста, а content — строка текста. Метод возвращает объект типа Element, с которым можно далее работать, изменяя свойства, трансформации и стиль текста.

var paper = Snap(800, 600);
var text = paper.text(100, 100, "Пример текста");

Ключевое отличие Snap.svg от стандартного SVG заключается в том, что текст можно стилизовать и анимировать так же, как любые другие графические элементы.

Атрибуты текстовых элементов

Основные атрибуты, которые чаще всего используются для текста:

  • font-size — размер шрифта в пикселях или других единицах.
  • font-family — название шрифта.
  • font-weight — жирность текста (normal, bold).
  • fill — цвет текста.
  • text-anchor — выравнивание текста относительно координат (start, middle, end).
  • letter-spacing — интервал между символами.
  • word-spacing — интервал между словами.

Пример установки атрибутов:

text.attr({
    "font-size": 24,
    "font-family": "Arial, sans-serif",
    "fill": "#ff6600",
    "font-weight": "bold",
    "text-anchor": "middle"
});

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

SVG не поддерживает стандартный HTML-тег <br>. Для создания многострочного текста используют элемент <tspan>, который можно добавлять внутрь текстового объекта. Snap.svg упрощает этот процесс с помощью метода paper.text().add() и создания <tspan> вручную:

var multiText = paper.text(100, 100, "");
multiText.add(paper.tspan("Первая строка").attr({x: 100, dy: 0}));
multiText.add(paper.tspan("Вторая строка").attr({x: 100, dy: 30}));
multiText.add(paper.tspan("Третья строка").attr({x: 100, dy: 30}));

Каждый <tspan> имеет свои координаты x и смещение по вертикали dy. Это позволяет гибко управлять расположением строк и создавать сложные текстовые блоки.

Трансформации текста

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

Пример вращения текста:

text.transform("r45,100,100"); // вращение на 45° вокруг точки (100, 100)

Пример анимации перемещения текста:

text.animate({x: 400, y: 200}, 1000, mina.easeinout);

Метод animate принимает объект атрибутов для изменения, длительность в миллисекундах и функцию плавности mina.*.

Стиль и оформление текста

Snap.svg позволяет применять стили CSS к тексту через метод attr или прямое присвоение через style.

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

text.attr({
    "fill": "#3366cc",
    "stroke": "#000000",
    "stroke-width": 1,
    "font-style": "italic"
});
  • fill задаёт цвет заливки текста.
  • stroke и stroke-width позволяют создать контур текста.
  • font-style управляет наклоном (normal, italic, oblique).

Также можно комбинировать с градиентами и паттернами, применяя их как fill:

var gradient = paper.gradient("l(0, 0, 0, 1)#f00-#00f");
text.attr({fill: gradient});

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

Атрибут text-anchor определяет точку привязки текста относительно координат:

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

Свойство alignment-baseline управляет вертикальным выравниванием текста (baseline, middle, hanging).

Пример:

text.attr({
    "text-anchor": "middle",
    "alignment-baseline": "middle"
});

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

Текстовые объекты в Snap.svg полностью поддерживают события: click, mouseover, mouseout, dblclick.

Пример с изменением цвета при наведении:

text.hover(
    function() { this.attr({fill: "#ff0000"}); },
    function() { this.attr({fill: "#3366cc"}); }
);

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

Встроенные методы Snap.svg для текста

  • getBBox() — возвращает прямоугольник, занимаемый текстом.
  • getLength() — длина текста в пикселях.
  • getSubpath(from, to) — часть текста для работы с кривыми (важно для текстовых эффектов вдоль пути).

Пример использования getBBox:

var bbox = text.getBBox();
console.log(bbox.width, bbox.height);

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

Текст вдоль кривой

Snap.svg поддерживает привязку текста к пути с помощью <textPath>:

var path = paper.path("M50,150 C150,50 250,250 350,150");
var textOnPath = paper.text(0, 0, "Текст по кривой");
textOnPath.attr({"textPath": path});

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

Snap.svg обеспечивает полное управление текстом на уровне SVG, сочетая мощь векторной графики с гибкостью анимации и стилей, что позволяет создавать как простые надписи, так и сложные интерактивные текстовые композиции.

Оглавление