Обводка (stroke)

В Snap.svg обводка (stroke) определяет цвет, толщину и стиль линий, которыми рисуются фигуры. Она применяется ко всем элементам, поддерживающим контур, включая <rect>, <circle>, <ellipse>, <line>, <path> и <polygon>. Управление обводкой осуществляется через методы attr(), stroke() и отдельные свойства объекта.

Настройка цвета и толщины

Для задания цвета обводки используется атрибут stroke. Значение может быть указано как в стандартном CSS-формате ("#ff0000", "red", "rgb(255,0,0)") или в формате HSL. Толщина линии задаётся атрибутом stroke-width, который принимает числовое значение в пикселях.

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

circle.attr({
    stroke: "#3498db",
    strokeWidth: 5
});

В данном примере создаётся круг с голубой обводкой толщиной 5 пикселей.

Стиль линии

Snap.svg поддерживает различные стили обводки:

  • stroke-linecap – определяет форму конца линии:

    • butt – стандартный обрезанный конец (по умолчанию)
    • round – закруглённый конец
    • square – квадратный выступающий конец

  • stroke-linejoin – задаёт стиль соединения сегментов:

    • miter – острый угол (по умолчанию)
    • round – скругление
    • bevel – скошенный угол
var line = s.line(50, 50, 350, 50);

line.attr({
    stroke: "#e74c3c",
    strokeWidth: 10,
    strokeLinecap: "round",
    strokeLinejoin: "round"
});

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

Пунктирные линии

Для создания пунктирной или штриховой обводки используется атрибут stroke-dasharray. Он принимает строку с последовательностью чисел, определяющих длину штриха и промежутка:

var rect = s.rect(50, 100, 300, 150);

rect.attr({
    stroke: "#2ecc71",
    strokeWidth: 8,
    strokeDasharray: "20,10"
});

Здесь создаётся прямоугольник с зелёной обводкой, где штрихи 20px чередуются с промежутками 10px. Snap.svg также поддерживает динамическое изменение массива чисел, например "5,5,2,2" для сложных паттернов.

Прозрачность и комбинированные цвета

Прозрачность обводки управляется атрибутом stroke-opacity. Значение от 0 (полностью прозрачная) до 1 (непрозрачная):

circle.attr({
    stroke: "blue",
    strokeWidth: 12,
    strokeOpacity: 0.5
});

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

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

Snap.svg позволяет анимировать обводку с помощью метода animate(). Чаще всего анимируют толщину, цвет или свойства штриховой линии:

circle.animate({
    strokeWidth: 20,
    stroke: "#f1c40f"
}, 1000, mina.easeinout);

Для создания эффекта “рисования линии” используется комбинация stroke-dasharray и stroke-dashoffset:

var path = s.path("M50,350 C150,50 250,450 350,150");

var length = path.getTotalLength();
path.attr({
    stroke: "#9b59b6",
    strokeWidth: 6,
    strokeDasharray: length,
    strokeDashoffset: length
});

path.animate({ strokeDashoffset: 0 }, 2000, mina.easeinout);

Линия постепенно появляется, имитируя процесс рисования по контуру.

Смешанные стили и градиенты

Обводку можно делать не только сплошной, но и градиентной:

var rect = s.rect(50, 50, 300, 200);

var gradient = s.gradient("l(0,0,1,0)#e74c3c-#3498db");

rect.attr({
    stroke: gradient,
    strokeWidth: 15
});

Градиент можно задавать линейный (l) или радиальный (r). Snap.svg автоматически применяет градиент к линии, сохраняя плавный переход цвета.

Советы по производительности

  • Стараться минимизировать частую анимацию stroke-width на сложных контурах, так как это влияет на перерисовку SVG.
  • Использовать stroke-dasharray вместо создания множества маленьких линий для пунктирного эффекта.
  • Комбинировать stroke-opacity с fill-opacity для экономии ресурсов при сложных визуальных эффектах.

Итоговые возможности обводки

Snap.svg предоставляет гибкие средства работы с обводкой:

  • Цвет, прозрачность, градиенты
  • Толщина линии
  • Концы и соединения (linecap, linejoin)
  • Пунктирные линии (dasharray, dashoffset)
  • Анимация и эффект “рисования”

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

Оглавление