Заливка (fill)

Свойство fill определяет цвет внутренней заливки графического элемента SVG. В Snap.svg его можно задавать как при создании элемента, так и изменять динамически через методы библиотеки. Любой SVG-элемент, поддерживающий заливку (например, <rect>, <circle>, <ellipse>, <path>), может использовать fill для определения визуальной окраски своей поверхности.

Примеры основных способов задания:

var s = Snap(400, 400);
var circle = s.circle(100, 100, 50);

// Задание цвета через метод attr
circle.attr({ fill: "#ff0000" });

// Можно использовать CSS-подобные строки
circle.attr({ fill: "rgb(0,255,0)" });

// Прозрачная заливка
circle.attr({ fill: "none" });

Ключевые моменты:

  • fill: none отключает заливку.
  • Цвет можно задавать как в HEX, RGB, HSL или ключевыми словами (red, blue и т.д.).
  • Snap.svg автоматически применяет заливку к элементу и обновляет его визуальное представление.

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

Snap.svg поддерживает линейные и радиальные градиенты. Градиенты создаются через метод gradient, который возвращает объект, подходящий для fill.

Линейный градиент:

var grad = s.gradient("l(0, 0, 1, 1)#f00-#00f");
var rect = s.rect(10, 10, 200, 100);
rect.attr({ fill: grad });

Объяснение синтаксиса:

  • "l(x1, y1, x2, y2)#color1-#color2" — линейный градиент, где x1, y1 и x2, y2 задают координаты начала и конца градиента (от 0 до 1 относительно размеров элемента).
  • Цвета разделяются дефисом -.

Радиальный градиент:

var gradRad = s.gradient("r(0.5, 0.5, 0.5)#ff0-#f00");
var circle = s.circle(200, 200, 50).attr({ fill: gradRad });

Синтаксис:

  • "r(cx, cy, r)#color1-#color2" — радиальный градиент с центром (cx, cy) и радиусом r (от 0 до 1).

Градиенты можно комбинировать с прозрачностью, задавая цвета в формате RGBA:

circle.attr({ fill: "r(0.5, 0.5, 0.5)rgba(255,0,0,0.5)-rgba(0,0,255,0.5)" });

Паттерны (узоры) как заливка

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

var pattern = s.pattern(0, 0, 20, 20, function(p) {
    p.rect(0, 0, 20, 20).attr({ fill: "#ccc" });
    p.circle(10, 10, 5).attr({ fill: "#333" });
});

var rect = s.rect(50, 50, 200, 100).attr({ fill: pattern });

Особенности паттернов:

  • s.pattern(x, y, width, height, callback) создаёт узор с заданными координатами и размерами.
  • Внутри колбэка можно добавлять любые SVG-элементы для формирования повторяющейся структуры.
  • Паттерн можно комбинировать с прозрачностью, градиентами и трансформациями.

Динамическое изменение заливки

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

var circle = s.circle(100, 100, 50).attr({ fill: "#f00" });

circle.animate({ fill: "#00f" }, 1000, mina.easeinout);
  • Первый аргумент — объект с атрибутами, которые нужно анимировать.
  • Второй аргумент — длительность анимации в миллисекундах.
  • Третий аргумент — функция интерполяции (mina.linear, mina.easein, mina.easeout, mina.easeinout).

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

Наследование и прозрачность

Заливка SVG-элементов может наследоваться через CSS и Snap.svg:

var group = s.group(
    s.rect(10, 10, 100, 100),
    s.circle(60, 60, 30)
);

group.attr({ fill: "#0f0" });
  • Все элементы внутри группы унаследуют заданную заливку, если для них не задан индивидуальный fill.
  • Прозрачность цвета задаётся через альфа-канал или отдельный атрибут opacity:
circle.attr({ fill: "rgba(255,0,0,0.5)" });
circle.attr({ fillOpacity: 0.5 });
  • fillOpacity управляет только прозрачностью заливки, не влияя на обводку (stroke).

Заключение по использованию

Свойство fill в Snap.svg является основным инструментом для визуального оформления SVG-элементов. Оно охватывает:

  • Одноцветную заливку.
  • Линейные и радиальные градиенты.
  • Паттерны и узоры.
  • Прозрачность и наследование внутри групп.
  • Динамическую анимацию через метод animate.

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

Оглавление