Стилизация отдельных фрагментов

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

Атрибуты fill и stroke

fill отвечает за заливку фигуры, а stroke – за контур.

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

const rect = draw.rect(150, 100)
                 .fill('#3498db')      // синий цвет заливки
                 .stroke({ color: '#e74c3c', width: 4 }); // красный контур толщиной 4px

  • fill('color') – устанавливает цвет заливки.

  • stroke({ color, width, opacity, linecap }) – настраивает параметры контура:

    • color – цвет линии;
    • width – толщина линии;
    • opacity – прозрачность контура;
    • linecap – форма концов линии ('butt', 'round', 'square').

Управление прозрачностью и смешиванием цветов

Прозрачность объекта задается через opacity, а заливку можно комбинировать с градиентами или паттернами.

rect.opacity(0.6); // делает прямоугольник полупрозрачным

Для градиентов используется метод gradient():

const gradient = draw.gradient('linear', function(add) {
  add.stop(0, '#ff0000'); // красный
  add.stop(1, '#ffff00'); // желтый
});

rect.fill(gradient);
  • Линейные (linear) и радиальные (radial) градиенты полностью поддерживаются.
  • Можно управлять направлением и координатами градиента через дополнительные параметры.

Работа с отдельными сегментами фигур

SVG.js позволяет стилизовать не только весь объект, но и отдельные сегменты, например, части пути path.

const path = draw.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
                 .fill('none')
                 .stroke({ color: '#2ecc71', width: 3 });

path.each(function(i, children) {
    if (i % 2 === 0) {
        this.stroke({ color: '#e67e22' });
    }
});
  • Метод each() перебирает все подэлементы пути, позволяя назначать индивидуальные стили.
  • Можно комбинировать с анимациями для создания динамических эффектов.

Использование классов и идентификаторов

Каждый элемент SVG может иметь id и class, что облегчает группировку и стилизацию через CSS.

rect.attr({ id: 'myRect', class: 'highlight' });

SVG('#myRect').fill('#9b59b6');
SVG('.highlight').stroke({ color: '#f1c40f', width: 2 });
  • attr() позволяет задавать любые стандартные атрибуты SVG.
  • Классы и идентификаторы поддерживают селекторы, что позволяет менять стили для нескольких элементов одновременно.

Работа с группами (<g>)

Группировка элементов через group() упрощает массовую стилизацию:

const group = draw.group();

const circle1 = group.circle(50).fill('#1abc9c');
const circle2 = group.circle(50).move(60, 0).fill('#e74c3c');

group.stroke({ color: '#34495e', width: 2 }); // применится ко всем элементам группы
  • Стили, применяемые к группе, наследуются дочерними элементами.
  • Можно одновременно перемещать, масштабировать или вращать всю группу.

Динамическая смена стилей

SVG.js поддерживает динамическое изменение стилей, что полезно для интерактивных интерфейсов:

rect.on('mouseover', () => rect.fill('#f39c12'));
rect.on('mouseout', () => rect.fill('#3498db'));
  • События mouseover, mouseout, click и другие могут менять свойства объектов.
  • Анимации стиля реализуются через animate():
rect.animate(1000, '<>').fill('#8e44ad');
  • <>– тип easing анимации (<,>,<>,linear`).

Стилизация текста

SVG.js позволяет настраивать внешний вид текста через text() и цепочку методов:

const txt = draw.text('SVG.js Example')
                .font({ size: 24, family: 'Arial', weight: 'bold' })
                .fill('#2980b9')
                .stroke({ color: '#2c3e50', width: 1 });
  • font() – задаёт размер, семейство, стиль и толщину шрифта.
  • fill() и stroke() применяются к тексту так же, как к фигурам.

Использование паттернов и текстур

Для более сложной стилизации заливки применяются паттерны:

const pattern = draw.pattern(20, 20, function(add) {
  add.rect(10, 10).fill('#bdc3c7');
  add.circle(5).fill('#2c3e50');
});

rect.fill(pattern);
  • Паттерн создаётся через pattern(width, height, callback).
  • Можно использовать повторяющиеся фигуры для сложных декоративных эффектов.

Итоговые рекомендации

  • Стилизация объектов в SVG.js гибкая и может выполняться как через методы библиотеки, так и через CSS.
  • Для отдельных фрагментов пути или группы элементов стоит использовать each() или группировку через group().
  • Динамическое управление стилями возможно через события и анимации, что делает библиотеку мощным инструментом для интерактивной графики.

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

Оглавление