Типы пунктира

Snap.svg предоставляет гибкий механизм работы с линиями, позволяя задавать штриховые (dashed) линии через атрибут stroke-dasharray. Этот атрибут управляет тем, как линии разрываются на штрихи и промежутки, что особенно важно при создании графических схем, диаграмм или декоративных элементов.

Атрибут stroke-dasharray

stroke-dasharray принимает строку или массив чисел, определяющих последовательность черточек и промежутков:

var s = Snap(400, 400);
var line = s.line(50, 50, 350, 50);
line.attr({
    stroke: "#000",
    strokeWidth: 4,
    strokeDasharray: "10,5" // 10px линия, 5px пробел
});
  • Числовая последовательность: [10, 5, 2, 5] создаёт паттерн, где первый элемент — длина штриха, второй — пробела, третий — штриха, четвёртый — пробела, и так далее. При необходимости последовательность повторяется по всей длине линии.
  • Строка "10,5,2,5" работает аналогично массиву и может использоваться для удобства.

Длина и повторы штрихов

Длина каждого штриха и промежутка задаётся в пикселях, и Snap.svg автоматически повторяет заданный паттерн вдоль всей линии. Если длина линии не кратна сумме элементов массива, последний штрих может быть усечён:

line.attr({
    strokeDasharray: [15, 10]
});
  • Первый штрих будет 15px.
  • Затем пробел 10px.
  • Повтор до конца линии.
  • Если оставшееся пространство меньше штриха, штрих обрезается.

Атрибут stroke-dashoffset

stroke-dashoffset управляет смещением начала паттерна вдоль линии:

line.attr({
    strokeDasharray: "10,5",
    strokeDashoffset: 5
});
  • Паттерн сдвигается на 5px.
  • Позволяет создавать эффект движения линии при анимации.

Типичные шаблоны пунктира

  • Равномерный штрих и пробел: "5,5" — простая пунктирная линия.
  • Длинные штрихи, короткие пробелы: "15,3" — подчёркивает контуры.
  • Сложные декоративные линии: "10,5,2,5" — чередование длинных и коротких штрихов.

Использование массивов позволяет тонко настраивать повторяемые узоры без необходимости ручного рисования отдельных отрезков.

Применение к различным элементам

Атрибуты штрихов работают с любыми элементами Snap.svg, имеющими контур:

  • line — простые линии.
  • rect и circle — обводка фигур.
  • path — сложные кривые и многоугольники.

Пример для круга:

var circle = s.circle(200, 200, 80);
circle.attr({
    stroke: "#f00",
    strokeWidth: 4,
    fill: "none",
    strokeDasharray: "20,10"
});

Пример для пути:

var path = s.path("M50 150 C150 50, 250 250, 350 150");
path.attr({
    stroke: "#00f",
    strokeWidth: 3,
    fill: "none",
    strokeDasharray: "15,5,5,5"
});

Анимация пунктира

Snap.svg позволяет анимировать stroke-dashoffset, создавая эффект движущегося штриха:

line.attr({ strokeDasharray: "10,5" });

Snap.animate(0, 15, function(val) {
    line.attr({ strokeDashoffset: val });
}, 2000, mina.linear, function() {
    Snap.animate(15, 0, function(val) {
        line.attr({ strokeDashoffset: val });
    }, 2000, mina.linear);
});
  • Паттерн выглядит как движущийся пунктир.
  • Можно циклически повторять для бесконечного эффекта.

Практические рекомендации

  1. Использовать массивы для сложных шаблонов — легче контролировать длину каждого штриха и пробела.
  2. Комбинировать stroke-dasharray и stroke-dashoffset для динамических эффектов.
  3. Проверять видимость на кривых — на крутых изгибах короткие штрихи могут сливаться.
  4. Следить за толщиной линии — слишком тонкие линии при длинных пробелах могут казаться разорванными.

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

Оглавление