Толщина линий и стили обводки

SVG.js предоставляет гибкий и мощный механизм управления визуальными характеристиками линий и контуров графических объектов. Работа с обводкой в этой библиотеке строится на свойствах stroke, stroke-width, stroke-dasharray и других параметрах, позволяющих детально настраивать внешний вид линий.

Установка толщины линии

Толщина линии задается с помощью метода .stroke({ width: значение }) или через отдельный метод .strokeWidth(значение).

const draw = SVG().addTo('body').size(300, 300);
const rect = draw.rect(100, 100).stroke({ width: 5, color: '#f06' });
  • width — число, задающее толщину линии в пикселях.
  • color — цвет линии, можно использовать HEX, RGB или CSS-названия.

Метод .strokeWidth() позволяет изменить толщину линии динамически:

rect.strokeWidth(10);

Цвет и прозрачность обводки

Цвет линии задается свойством color в объекте stroke, либо методом .stroke({ color: 'цвет' }). Для управления прозрачностью используется opacity:

rect.stroke({ color: '#00f', opacity: 0.5 });
  • opacity — значение от 0 (полностью прозрачная линия) до 1 (полностью непрозрачная).

Типы линий (solid, dashed, dotted)

SVG.js поддерживает различные стили линий с помощью stroke-dasharray. Этот параметр определяет последовательность длин штрихов и промежутков:

// Сплошная линия
rect.stroke({ color: '#f06', width: 5, dasharray: '' });

// Пунктирная линия
rect.stroke({ color: '#f06', width: 5, dasharray: '5,5' });

// Длинные штрихи с промежутками
rect.stroke({ color: '#f06', width: 5, dasharray: '10,5,2,5' });
  • Формат 'длинаШтриха, длинаПробела, ...'.
  • Можно комбинировать произвольное количество штрихов и пробелов для создания сложных узоров.

Метод .dasharray() также поддерживает передачу массива чисел:

rect.dasharray([10, 5, 2, 5]);

Концы линий и соединения

Концы линий и соединения сегментов задаются через stroke-linecap и stroke-linejoin.

stroke-linecap:

rect.stroke({ linecap: 'round' }); // round, square, butt
  • butt — стандартный обрезанный конец.
  • round — закругленный конец.
  • square — квадратный выступ за линию.

stroke-linejoin:

rect.stroke({ linejoin: 'round' }); // round, bevel, miter
  • miter — острый угол (по умолчанию).
  • round — закругленный угол.
  • bevel — скошенный угол.

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

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

SVG.js позволяет изменять свойства линии после создания объекта без пересоздания графики:

rect.stroke({ width: 8, color: '#0f0', dasharray: '4,2', linecap: 'square', linejoin: 'bevel' });

Все изменения применяются мгновенно и автоматически обновляют отображение на холсте.

Применение к сложным элементам

Методы работы с обводкой поддерживаются для всех примитивов: rect, circle, line, polyline, polygon, а также для групп объектов (group). Для групп линии настраиваются через .stroke() у самого объекта или через .each():

const group = draw.group();
const c1 = group.circle(50).fill('none').stroke({ width: 3 });
const c2 = group.circle(30).fill('none').stroke({ width: 5, dasharray: '4,4' });

group.each(el => el.stroke({ color: '#333' }));

Анимация обводки

SVG.js поддерживает анимацию свойств линии через метод .animate(). Толщину, цвет и штрихи можно анимировать плавно:

rect.animate(1000, '<>').stroke({ width: 12, color: '#ff0', dasharray: '10,5' });
  • Первый аргумент — продолжительность в миллисекундах.
  • Второй аргумент — функция easing ('<>' — плавное ускорение/замедление).

Итоговые рекомендации по стилям линии

  • Для аккуратных интерфейсных элементов лучше использовать закругленные концы и соединения (round).
  • Пунктирные линии создаются через dasharray, где важно правильно подобрать длину штрихов и промежутков.
  • Толщина линии должна быть согласована с размером объекта и общей композицией.
  • Анимация обводки добавляет интерактивность, но требует контроля плавности изменения параметров.

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

Оглавление