Изображения

В Snap.svg для работы с изображениями используется метод image(), который позволяет вставлять растровые изображения в SVG-документ. Основной синтаксис выглядит следующим образом:

var s = Snap("#svg");
var img = s.image("path/to/image.png", x, y, width, height);
  • "path/to/image.png" — путь к изображению. Может быть как локальный путь, так и URL.
  • x, y — координаты верхнего левого угла изображения внутри SVG.
  • width, height — размеры изображения.

После создания изображения его можно трансформировать, изменять размеры и позицию с помощью стандартных методов Snap.svg, таких как attr(), transform(), animate().

img.attr({
    x: 50,
    y: 50,
    width: 200,
    height: 150
});

img.transform("r45"); // поворот на 45 градусов

Манипуляция свойствами изображений

С помощью метода attr() можно изменять отдельные свойства изображения после его создания:

  • x, y — позиция изображения.
  • width, height — размеры.
  • opacity — прозрачность (от 0 до 1).
  • visibility — видимость (visible, hidden).
img.attr({
    opacity: 0.7,
    visibility: "visible"
});

Преобразования изображений

Snap.svg поддерживает сложные трансформации через метод transform(). Можно комбинировать несколько действий:

  • t(dx, dy) — перенос.
  • s(sx, sy, cx, cy) — масштабирование относительно точки (cx, cy).
  • r(angle, cx, cy) — вращение относительно точки (cx, cy).
  • skewX(angle), skewY(angle) — наклон по оси X или Y.

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

img.transform("t100,50r30,150,75s1.5,1.5,150,75");

Анимация изображений

Для плавного изменения свойств используется метод animate(). Например, можно переместить изображение по координатам и изменить его прозрачность:

img.animate({ x: 300, y: 200, opacity: 0.5 }, 1000, mina.easeinout);
  • Первый аргумент — объект свойств, которые нужно анимировать.
  • Второй аргумент — продолжительность анимации в миллисекундах.
  • Третий аргумент — функция интерполяции из набора mina (mina.linear, mina.easein, mina.easeout, mina.easeinout).

Масштабирование и адаптивность

Для динамического изменения размеров изображения в зависимости от контейнера можно использовать относительные единицы и привязку к размерам SVG. Snap.svg позволяет задать атрибуты в процентах:

img.attr({
    width: "50%",
    height: "50%"
});

Для поддержания пропорций при изменении размеров контейнера удобно использовать метод getBBox(), чтобы получить исходные размеры и позицию:

var bbox = img.getBBox();
img.attr({
    width: bbox.width * 1.2,
    height: bbox.height * 1.2
});

Встраивание изображений в группы

Изображения могут быть частью группы для совместной трансформации и управления. Создается группа с помощью метода group():

var g = s.group(img);
g.transform("t50,50r15");

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

Клиппинг и маски

Snap.svg позволяет использовать изображения в качестве масок или клипов. Для этого применяются методы clip() и mask():

var circle = s.circle(150, 150, 100);
img.clip(circle); // изображение обрезается по форме круга

var rect = s.rect(100, 100, 200, 200);
img.mask(rect); // изображение отображается только внутри прямоугольника

Клиппинг и маски дают возможность создавать сложные визуальные эффекты без изменения исходного изображения.

Работа с внешними SVG как изображениями

Помимо растровых изображений, Snap.svg поддерживает загрузку внешних SVG-файлов через метод use(). Это позволяет вставлять в документ готовые SVG-элементы:

Snap.load("icon.svg", function(fragment) {
    s.append(fragment);
});

Использование use() обеспечивает повторное использование одного и того же SVG без копирования кода, что удобно для иконок и повторяющихся элементов интерфейса.

Обработка событий

Изображения поддерживают стандартные события SVG:

img.click(function() {
    this.attr({ opacity: 0.5 });
});

img.hover(
    function() { this.attr({ opacity: 1 }); },
    function() { this.attr({ opacity: 0.7 }); }
);

Можно подключать события мыши и касания, применять интерактивные эффекты и создавать динамические интерфейсы.

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

  • Для больших изображений рекомендуется использовать формат PNG или WebP с компрессией.
  • Если изображения повторяются, лучше создавать клон через use(), чем вставлять дубликаты.
  • Избегать чрезмерных анимаций нескольких больших изображений одновременно — это снижает производительность.

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

Оглавление