Паттерны (patterns)

В Snap.svg паттерны используются для заполнения фигур повторяющимися графическими элементами. Паттерн определяется как SVG-элемент <pattern>, который может содержать любые SVG-объекты: прямоугольники, линии, круги, текст или другие фигуры. После создания паттерна его можно применить к фигуре через атрибут fill.

Создание паттерна

Для создания паттерна в Snap.svg используется метод paper.pattern(x, y, width, height, contentFunction). Параметры x и y задают смещение паттерна, width и height — размеры блока повторения, а contentFunction — функция, возвращающая содержимое паттерна.

Пример создания простого паттерна с горизонтальными линиями:

var s = Snap(400, 400);

var linePattern = s.pattern(0, 0, 20, 20, function(p) {
    p.line(0, 0, 20, 0).attr({stroke: "#000", strokeWidth: 2});
    return p;
});

var rect = s.rect(50, 50, 300, 300).attr({
    fill: linePattern
});

Здесь создается паттерн размером 20x20 пикселей с одной горизонтальной линией. Этот паттерн применяется к прямоугольнику размером 300x300, который автоматически заполняется повторяющимися линиями.

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

Паттерны поддерживают большинство стандартных атрибутов SVG: patternUnits, patternContentUnits, patternTransform.

  • patternUnits: определяет, в каких единицах заданы размеры паттерна. Возможные значения: userSpaceOnUse (размеры в пикселях) и objectBoundingBox (относительные размеры от 0 до 1).
  • patternContentUnits: задает единицы измерения для содержимого паттерна. Обычно userSpaceOnUse обеспечивает точное позиционирование элементов внутри паттерна.
  • patternTransform: позволяет трансформировать паттерн с помощью матриц трансформации, например, вращения или масштабирования.

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

var rotatedPattern = s.pattern(0, 0, 40, 40, function(p) {
    p.rect(0, 0, 20, 20).attr({fill: "#f06"});
    return p;
});
rotatedPattern.attr({
    patternTransform: "rotate(45 20 20)"
});

s.circle(200, 200, 100).attr({
    fill: rotatedPattern
});

В этом примере квадрат внутри паттерна поворачивается на 45° вокруг центра блока 20x20, создавая эффект диагонального повторения.

Использование сложных паттернов

Паттерн может содержать несколько объектов, включая группы (<g>). Snap.svg позволяет добавлять сложные композиции, используя вложенные элементы и комбинируя фигуры с разными цветами и прозрачностью.

Пример паттерна с несколькими элементами:

var complexPattern = s.pattern(0, 0, 50, 50, function(p) {
    p.rect(0, 0, 25, 25).attr({fill: "#ff0"});
    p.circle(25, 25, 10).attr({fill: "#00f"});
    p.line(0, 50, 50, 0).attr({stroke: "#f00", strokeWidth: 2});
    return p;
});

s.ellipse(200, 200, 150, 100).attr({
    fill: complexPattern
});

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

Применение паттернов к контуру и границам

Паттерны можно использовать не только для заливки фигуры (fill), но и для обводки (stroke). Для этого достаточно назначить паттерн в атрибут stroke:

var strokePattern = s.pattern(0, 0, 10, 10, function(p) {
    p.line(0, 0, 10, 10).attr({stroke: "#0f0", strokeWidth: 2});
    return p;
});

s.rect(50, 50, 200, 200).attr({
    fill: "#fff",
    stroke: strokePattern,
    strokeWidth: 10
});

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

Анимация паттернов

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

Пример анимации движения линий внутри паттерна:

var animPattern = s.pattern(0, 0, 30, 30, function(p) {
    var line = p.line(0, 0, 30, 0).attr({stroke: "#00f", strokeWidth: 2});
    line.animate({y1: 15, y2: 15}, 1000, mina.easeinout, function() {
        line.animate({y1: 0, y2: 0}, 1000, mina.easeinout);
    });
    return p;
});

s.rect(100, 100, 200, 200).attr({
    fill: animPattern
});

Это позволяет создавать эффекты движущейся текстуры без использования сложного кода Canvas или WebGL.

Оптимизация и производительность

  • Размер блока паттерна влияет на производительность: меньшие блоки создают более частое повторение, что может замедлить рендеринг.
  • Использование групп помогает упорядочить элементы и уменьшить количество повторяющихся операций.
  • Избегать тяжелых фильтров внутри паттернов, таких как тени и размытие, особенно при анимации.

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

Оглавление