Цвета: заливка и обводка

SVG.js предоставляет удобный и мощный API для работы с цветами элементов SVG. Основные инструменты для управления цветом — методы .fill() и .stroke(). Они позволяют задавать как однотонные цвета, так и градиенты, а также управлять прозрачностью.

Метод .fill()

Метод .fill() отвечает за внутреннюю заливку фигуры. Он поддерживает следующие варианты передачи цвета:

  1. Строковый формат цвета:
rect.fill('#ff0000');      // красный в формате HEX
rect.fill('rgb(255,0,0)'); // красный в формате RGB
rect.fill('red');           // красный по имени
  1. Прозрачность и альфа-канал:
rect.fill({ color: '#00ff00', opacity: 0.5 }); // зеленый с 50% прозрачностью
  1. Градиенты: SVG.js позволяет создавать линейные и радиальные градиенты для заливки.
let gradient = draw.gradient('linear', function(add) {
    add.stop(0, '#f06');
    add.stop(1, '#4a90e2');
});
rect.fill(gradient);
  • Линейный градиент создается с помощью draw.gradient('linear', callback).
  • Радиальный градиент аналогично, через draw.gradient('radial', callback).

Метод .stroke()

Метод .stroke() управляет обводкой фигуры. Основные параметры:

  • Цвет:
circle.stroke({ color: 'blue' });
  • Ширина линии:
circle.stroke({ width: 5 });
  • Тип линии:
circle.stroke({ dasharray: '5,5' }); // пунктирная линия
  • Прозрачность обводки:
circle.stroke({ color: 'green', opacity: 0.7 });

Можно комбинировать параметры в одном объекте:

rect.stroke({ color: '#000', width: 3, opacity: 0.8, dasharray: '10,5' });

Цветовые форматы и поддержка прозрачности

SVG.js поддерживает все стандартные CSS-цветовые форматы:

  • HEX (#rrggbb и #rgb)
  • RGB (rgb(r,g,b))
  • RGBA (rgba(r,g,b,a))
  • Именованные цвета (red, green, blue, orange и т.д.)
  • HSL и HSLA (hsl(h,s,l) и hsla(h,s,l,a))

Прозрачность можно задавать либо через opacity для .fill() или .stroke(), либо через альфа-канал в формате RGBA/HSLA.

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

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

let linear = draw.gradient('linear', function(add) {
    add.stop(0, '#ff0');
    add.stop(1, '#f00');
});
rect.fill(linear);
  • add.stop(offset, color) — добавляет остановку градиента. offset принимает значения от 0 до 1.

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

let radial = draw.gradient('radial', function(add) {
    add.stop(0, '#0f0');
    add.stop(1, '#00f');
});
circle.fill(radial);
  • Можно изменять центр и радиус градиента через методы .from() и .to():
linear.from(0, 0).to(1, 1); // направление линейного градиента
radial.from(0.5, 0.5).to(0.5, 0.5, 0.5); // центр и радиус радиального градиента

Примеры комбинирования заливки и обводки

let rect = draw.rect(200, 100);
rect.fill({ color: '#ffcc00', opacity: 0.6 });
rect.stroke({ color: '#333', width: 4, dasharray: '10,5' });
  • Прозрачная заливка с контрастной пунктирной обводкой.
  • Позволяет создавать сложные визуальные эффекты без использования внешних CSS.

Использование CSS-переменных и динамических цветов

SVG.js поддерживает динамическое управление цветом с помощью CSS-переменных или Jav * aScript:

let primaryColor = '#3498db';
rect.fill(primaryColor);
circle.stroke({ color: primaryColor, width: 2 });

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

Анимация цвета

Методы .animate() и .fill()/.stroke() позволяют плавно менять цвет:

rect.animate(1000).fill('#e74c3c');   // плавная смена заливки
circle.animate(1500).stroke({ color: '#2ecc71', width: 6 });
  • Анимация поддерживает задержки, easing и последовательные цепочки.
  • Можно анимировать одновременно заливку и обводку.

Резюме по цвету в SVG.js

  • .fill() — внутренний цвет фигуры, поддержка прозрачности и градиентов.
  • .stroke() — цвет и стиль линии контура, ширина, пунктир, прозрачность.
  • Градиенты создаются через draw.gradient('linear|radial', callback).
  • Поддерживаются все стандартные CSS-цветовые форматы.
  • Цвет можно динамически менять и анимировать, используя методы .animate() и объекты настроек.

Эти инструменты позволяют создавать визуально богатые SVG-графики с детальной настройкой цвета и стиля обводки.

Оглавление