Декорирование текста

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

var s = Snap(800, 600);
var t = s.text(100, 100, "Привет, Snap.svg!");
t.attr({
    "font-size": 24,
    "fill": "#3498db",
    "font-family": "Arial, sans-serif"
});

Ключевые атрибуты для текста:

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

Разделение текста на строки и управление позиционированием

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

var text = s.text(50, 50, "").attr({"font-size": 20, "fill": "#2c3e50"});
var lines = ["Первая строка", "Вторая строка", "Третья строка"];
lines.forEach((line, i) => {
    text.add(Snap.tspan(line, 0, i * 25));
});
  • tspan позволяет управлять каждой строкой отдельно.
  • Координаты x и y для tspan могут быть индивидуальными.
  • Можно задавать отдельные атрибуты для каждого tspan: цвет, стиль, трансформацию.

Декоративные эффекты текста

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

Градиенты и заливка

Текст можно заливать линейными или радиальными градиентами.

var gradient = s.gradient("l(0, 0, 1, 1)#ff0000-#ffff00");
t.attr({fill: gradient});
  • Линейный градиент задаётся как l(x1, y1, x2, y2)#color1-#color2.
  • Радиационный градиент создаётся с помощью r(cx, cy, r)#color1-#color2.

Обводка и тень

Для создания обводки текста используется атрибут stroke:

t.attr({
    stroke: "#000",
    strokeWidth: 2
});

Тень можно имитировать через дубликат текста с небольшим смещением и изменённым цветом:

var shadow = t.clone().attr({
    fill: "#555",
    x: t.attr("x") + 2,
    y: t.attr("y") + 2
});

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

Snap.svg поддерживает трансформации через метод transform().

t.transform("r45"); // поворот на 45 градусов
t.transform("s1.5,1.5"); // масштабирование
t.transform("t50,0"); // смещение
  • Можно комбинировать несколько трансформаций: "t50,50 r30 s2,2".
  • Для анимации используют метод animate(attr, duration, easing).
t.animate({transform: "r360"}, 2000, mina.easeinout);

Анимация текста и декоративные приёмы

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

Появление букв по одной

Разбив текст на отдельные символы и анимируя их прозрачность:

var str = "Hello, Snap!";
for (let i = 0; i < str.length; i++) {
    let letter = s.text(100 + i * 20, 200, str[i]).attr({fill: "#e74c3c", opacity: 0});
    letter.animate({opacity: 1}, 500, mina.easeinout, null);
}

Пульсация текста

t.animate({fontSize: 40}, 500, mina.backinout, function() {
    t.animate({fontSize: 24}, 500, mina.backinout);
});

Движение текста вдоль пути

Можно создать кривую и заставить текст двигаться по ней:

var path = s.path("M100,300 C200,100 400,500 500,300").attr({stroke: "#2ecc71", fill: "none"});
var txt = s.text(0, 0, "Движение по кривой");
Snap.animate(0, 1, function(value) {
    var pos = path.getPointAtLength(value * path.getTotalLength());
    txt.attr({x: pos.x, y: pos.y});
}, 3000);

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

Snap.svg поддерживает SVG-фильтры для создания размытия, свечения, искажения:

var blur = s.filter(Snap.filter.blur(2, 2));
t.attr({filter: blur});

Другие фильтры: shadow, turbulence, displacementMap — позволяют создавать необычные декоративные эффекты.

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

Оглавление