Шрифты и начертание

Snap.svg предоставляет мощные средства для создания и управления векторным графическим текстом на веб-странице. Основной объект для работы с текстом — это элемент text, который создаётся методом paper.text(x, y, string):

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

Здесь x и y определяют координаты начальной точки текста, а третий параметр — строку, которую нужно отобразить. После создания текста можно управлять его стилями, шрифтом и начертанием.

Настройка шрифта

Snap.svg позволяет изменять шрифты с помощью метода attr, применяя CSS-подобные свойства. Основные параметры:

  • font-family — задаёт семейство шрифта.

    txt.attr({
    'font-family': 'Arial, sans-serif'
});

  • font-size — размер шрифта. Можно указывать в пикселях, пунктах или других CSS-единицах:

    txt.attr({
    'font-size': '24px'
});

  • font-weight — толщина текста, принимает значения 'normal', 'bold', 'bolder', 'lighter' или числовые значения от 100 до 900:

    txt.attr({
    'font-weight': 'bold'
});

  • font-style — стиль текста: 'normal', 'italic', 'oblique':

    txt.attr({
    'font-style': 'italic'
});

Управление начертанием текста

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

  • fill — цвет текста. Принимает стандартные CSS-значения:

    txt.attr({
    'fill': '#FF5733'
});

  • stroke и stroke-width — позволяют обводить буквы линией:

    txt.attr({
    'stroke': '#000000',
    'stroke-width': 1
});

  • text-anchor — задаёт выравнивание текста относительно координат:

    • 'start' — слева (по умолчанию)
    • 'middle' — по центру
    • 'end' — справа
    txt.attr({
    'text-anchor': 'middle'
});

Многострочный текст и тэги <tspan>

Snap.svg поддерживает многострочный текст с помощью элемента <tspan>. Он создаётся методом paper.text с последующей вставкой tspan:

var t = s.text(100, 100, "");
t.add(Snap.tspan("Первая строка", 0, 0));
t.add(Snap.tspan("Вторая строка", 0, 20));

  • Первый параметр <tspan> — текст.

  • Второй и третий — смещение относительно родительского элемента (dx, dy).

  • Для разных строк можно задавать разные стили, шрифты и цвета:

    t.selectAll('tspan')[1].attr({
    'fill': 'blue',
    'font-style': 'italic'
});

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

Snap.svg поддерживает трансформации текста через метод transform. Можно комбинировать масштабирование, поворот, сдвиг и наклон:

txt.transform("r45t100,50s2,2");
  • r45 — поворот на 45°
  • t100,50 — смещение на 100 по x и 50 по y
  • s2,2 — масштабирование по x и y в 2 раза

Трансформации можно применять как к самому тексту, так и к его <tspan>, создавая сложные визуальные эффекты.

Использование внешних шрифтов

Snap.svg корректно работает с внешними веб-шрифтами через подключение CSS:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

После подключения достаточно указать шрифт через font-family:

txt.attr({
    'font-family': 'Roboto, sans-serif',
    'font-weight': 700
});

Важный момент — браузер должен загрузить шрифт до отображения текста. Для динамических анимаций часто используют window.onload или события шрифта FontFaceObserver.

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

Snap.svg позволяет анимировать атрибуты шрифта и начертания через метод animate. Примеры анимации:

  • Изменение размера текста:
txt.animate({'font-size': '48px'}, 1000, mina.easeinout);
  • Изменение цвета текста:
txt.animate({'fill': '#3498db'}, 1500, mina.linear);
  • Комбинированная анимация с трансформацией:
txt.animate({
    'fill': '#e74c3c',
    transform: 'r360'
}, 2000, mina.bounce);

Snap.svg обеспечивает плавную интерполяцию между значениями шрифта и атрибутами начертания.

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

  • Для удобного управления стилями текста лучше использовать CSS-классы и связывать их с атрибутами class в Snap.svg.
  • Многострочный текст через <tspan> позволяет создавать сложные типографические эффекты, включая разноцветные слова и разные начертания в одной строке.
  • Обводка текста (stroke) и её толщина (stroke-width) позволяют выделять текст на фоне сложной графики.
  • Комбинация transform и animate делает текст динамичным, создавая визуальные интерактивные эффекты без Canvas.

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

Оглавление