Форматирование текста

Snap.svg предоставляет мощный и гибкий механизм работы с текстом внутри SVG. Основным инструментом является метод text(), который создаёт элемент <text> SVG и позволяет управлять его содержимым и стилем. Синтаксис базового создания текста выглядит следующим образом:

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

Здесь 100, 100 — координаты начала текста по оси X и Y. После создания элемента текст можно модифицировать, используя методы Snap.svg и свойства SVG.

Настройка шрифта и размера

Snap.svg позволяет управлять шрифтом через метод attr():

t.attr({
    "font-family": "Arial, sans-serif",
    "font-size": 24,
    "fill": "#336699",
    "font-weight": "bold",
    "font-style": "italic"
});
  • font-family — задаёт шрифт или список шрифтов.
  • font-size — размер текста в пикселях.
  • fill — цвет текста.
  • font-weight — толщина шрифта (normal, bold, lighter и числовые значения).
  • font-style — стиль шрифта (normal, italic, oblique).

Метод attr() также позволяет задавать трансформации, влияющие на текст:

t.attr({
    transform: "rotate(45, 100, 100) scale(1.5)"
});

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

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

var multiText = s.text(100, 100, "");
multiText.add(
    s.tspan("Первая строка").attr({x: 100, dy: 0}),
    s.tspan("Вторая строка").attr({x: 100, dy: 30}),
    s.tspan("Третья строка").attr({x: 100, dy: 30})
);
  • x — координата начала строки.
  • dy — смещение по вертикали относительно предыдущей строки.

Каждый tspan можно стилизовать отдельно, задавая цвет, шрифт или размер:

multiText.selectAll("tspan")[1].attr({
    "fill": "red",
    "font-weight": "bold"
});

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

Snap.svg поддерживает выравнивание текста через атрибут text-anchor:

  • start — выравнивание по левому краю (по умолчанию)
  • middle — по центру
  • end — по правому краю

Пример:

t.attr({
    "text-anchor": "middle"
});

Для вертикального выравнивания используется комбинация координат y и dy в <tspan>.

Использование текста на пути

Эффектный способ анимации текста — размещение его вдоль кривой. Snap.svg позволяет привязать <text> к <path> с помощью элемента <textPath>:

var path = s.path("M50,200 C150,100 250,300 350,200");
var textOnPath = s.text(0, 0, "Текст вдоль кривой");
textOnPath.attr({ "textPath": path });
  • Текст будет следовать форме кривой.
  • Позицию текста можно изменять через атрибут startOffset.
textOnPath.attr({ "startOffset": "50%" });

Стилизация отдельных частей текста

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

var styledText = s.text(100, 100, "");
styledText.add(
    s.tspan("Красный ").attr({fill: "red"}),
    s.tspan("и ").attr({fill: "black"}),
    s.tspan("синий").attr({fill: "blue", "font-weight": "bold"})
);

Это открывает возможность комбинировать цвета, шрифты и размеры внутри одной строки.

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

Помимо стандартного позиционирования, текст можно анимировать и трансформировать:

t.animate({ transform: "rotate(360, 100, 100)" }, 2000, mina.easeinout);

Snap.svg использует mina — встроенную библиотеку анимации для плавного вращения, масштабирования или перемещения текста. Можно комбинировать несколько трансформаций:

t.attr({ transform: "rotate(15, 100, 100) scale(1.2)" });

Интерактивный текст

Snap.svg поддерживает события для текста, позволяя добавлять интерактивность:

t.hover(
    function() { this.attr({ fill: "orange" }); },
    function() { this.attr({ fill: "#336699" }); }
);

t.click(function() {
    alert("Текст был нажат!");
});
  • hover() — управление при наведении и уходе курсора.
  • click() — обработка кликов по тексту.

Эти методы позволяют создавать динамичные и отзывчивые интерфейсы.

Преобразование текста в кривые

Для сложной графики текст можно конвертировать в контуры:

var pathFromText = Snap.path.toCubic(t);
  • Позволяет применять любые SVG-трансформации, как к обычной кривой.
  • Используется для анимации текста как графического объекта, без зависимости от шрифта.

Советы по оптимизации

  • Многострочный текст стоит группировать в <g> для удобного позиционирования.
  • Частое изменение атрибутов через attr() лучше объединять в один вызов.
  • Для анимации больших текстов предпочтительно использовать tspan вместо создания множества отдельных <text> элементов.

Эти инструменты и методы позволяют полностью управлять текстом в Snap.svg, создавая сложные композиции, анимированные подписи, криволинейный текст и интерактивные элементы.

Оглавление