Паттерны и текстуры

SVG.js предоставляет мощные инструменты для создания и управления паттернами и текстурами внутри SVG-графики. Паттерн — это повторяющийся элемент, который можно использовать для заполнения фигур или линий. Текстуры часто строятся на основе паттернов и позволяют создавать визуально насыщенные графические элементы.

Создание базового паттерна

Для начала работы используется метод pattern(), который создаёт новый элемент <pattern> внутри SVG-контейнера:

const draw = SVG().addTo('body').size(400, 400);

const myPattern = draw.pattern(20, 20, function(add) {
    add.rect(10, 10).fill('#ff0000');
    add.rect(10, 10).move(10, 10).fill('#00ff00');
});

  • Параметры метода pattern(width, height, callback):

    • width, height — размеры повторяющегося блока.
    • callback — функция, принимающая объект add, который используется для добавления элементов внутрь паттерна.

  • Внутри паттерна можно использовать любые фигуры: rect, circle, line, path и т. д.

  • Паттерн автоматически повторяется на всей площади фигуры, к которой он применяется.

Применение паттерна к фигурам

После создания паттерна его можно использовать как fill для любой фигуры:

const rect = draw.rect(200, 200).fill(myPattern);

Также паттерн можно применять к circle, ellipse, polygon и другим SVG-элементам:

const circle = draw.circle(150).fill(myPattern);

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

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

SVG.js поддерживает трансформации паттернов, включая сдвиг, масштабирование и вращение. Для этого используется метод transform():

myPattern.transform({
    scaleX: 2,
    scaleY: 2,
    rotate: 45,
    translateX: 10,
    translateY: 5
});
  • scaleX, scaleY — масштабирование по осям X и Y.
  • rotate — вращение паттерна в градусах.
  • translateX, translateY — сдвиг паттерна внутри фигуры.

Трансформация позволяет создавать динамичные и необычные текстурные эффекты.

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

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

const imgPattern = draw.pattern(100, 100, function(add) {
    add.image('texture.png', 100, 100);
});

const square = draw.rect(300, 300).fill(imgPattern);
  • Метод image(src, width, height) вставляет растровое изображение в паттерн.
  • Размер паттерна задаёт область повторения изображения.

Такая техника полезна для создания текстур с фотографическими деталями или логотипами.

Комбинирование нескольких паттернов

Паттерны можно комбинировать, накладывая их друг на друга с использованием групп:

const combinedPattern = draw.pattern(50, 50, function(add) {
    add.rect(25, 25).fill('#0000ff');
    add.circle(20).move(15, 15).fill('#ffff00');
});

draw.rect(200, 200).fill(combinedPattern);
  • Внутри паттерна можно использовать группы (group()) для объединения элементов.
  • Группы позволяют трансформировать несколько объектов одновременно, сохраняя целостность текстуры.

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

SVG.js поддерживает анимацию паттернов через метод animate(). Например, можно создать движущуюся текстуру:

myPattern.animate(2000, '<>').transform({ translateX: 50 }).loop();
  • 2000 — длительность анимации в миллисекундах.
  • '<>' — тип кривой анимации (ease in-out).
  • Метод loop() повторяет анимацию бесконечно.

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

Практические советы

  • Для оптимизации производительности важно использовать паттерны с минимально достаточным размером блока. Большой паттерн может значительно замедлить рендеринг.
  • При использовании изображений следует учитывать формат и размер файла: SVG.js рендерит их внутри <pattern>, что увеличивает нагрузку на память при больших изображениях.
  • Трансформации паттерна не влияют на саму фигуру, только на его заливку, что позволяет легко создавать вариативные эффекты без изменения геометрии объекта.

Расширенные возможности

  • Паттерны можно использовать в градиентах: комбинировать fillPattern с линейным или радиальным градиентом.
  • SVG.js позволяет динамически менять содержимое паттерна через методы .clear() и добавление новых элементов в любой момент времени.
  • Можно строить интерактивные текстуры: изменять цвет, форму и положение паттерна в зависимости от пользовательских событий (click, mouseover, mousemove).

Эта система паттернов и текстур делает SVG.js мощным инструментом для создания визуально богатых и интерактивных графических элементов на веб-страницах. Она сочетает простоту создания, гибкость трансформаций и возможность динамических изменений, обеспечивая полный контроль над внешним видом SVG-объектов.

Оглавление