Пользовательские маркеры

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

Определение маркера

Маркеры в Snap.svg создаются с помощью метода marker(). Общий синтаксис:

var marker = s.marker(x, y, width, height, refX, refY);
  • x, y — координаты верхнего левого угла области маркера.
  • width, height — размеры маркера.
  • refX, refY — координаты точки привязки маркера к концу пути.

Пример создания простого треугольного маркера:

var s = Snap("#svg");

var arrowMarker = s.marker(0, 0, 10, 10, 10, 5);
var arrowPath = s.path("M0,0 L10,5 L0,10 Z");
arrowMarker.add(arrowPath);

В этом примере:

  • M0,0 L10,5 L0,10 Z — путь, описывающий треугольник.
  • arrowMarker.add(arrowPath) — добавление формы в маркер.

Применение маркера к линии

Чтобы использовать маркер, необходимо присвоить его атрибуту marker-start, marker-mid или marker-end объекта <path> или <line>:

var line = s.line(20, 20, 200, 20);
line.attr({
    stroke: "#000",
    strokeWidth: 2,
    markerEnd: arrowMarker
});
  • markerEnd — маркер в конце линии.
  • markerStart — маркер в начале.
  • markerMid — маркеры на всех промежуточных сегментах.

Snap.svg автоматически масштабирует маркер под угол наклона линии.

Настройка ориентации и масштаба

По умолчанию маркеры ориентируются вдоль линии, к которой они применяются. Для изменения поведения используется атрибут orient:

arrowMarker.attr({
    orient: "auto" // "auto" — автоматически вдоль линии, "0" — фиксированный угол
});

Также можно управлять масштабом маркера через CSS-стиль markerUnits:

arrowMarker.attr({
    markerUnits: "strokeWidth" // масштабирование маркера относительно ширины линии
});
  • strokeWidth — размер маркера зависит от толщины линии.
  • userSpaceOnUse — фиксированный размер, не зависит от линии.

Создание сложных маркеров

Маркеры могут содержать несколько элементов: линии, кривые, круги, текст. Пример стрелки с кругом на конце:

var complexMarker = s.marker(0, 0, 20, 20, 20, 10);
var arrow = s.path("M0,0 L20,10 L0,20 Z").attr({fill: "#f00"});
var circle = s.circle(20, 10, 3).attr({fill: "#000"});
complexMarker.add(arrow, circle);

Такой маркер будет отображать треугольник с точкой на конце линии.

Использование маркеров с кривыми

Маркеры корректно работают с кривыми, например с path вида M x,y C x1,y1 x2,y2 x3,y3:

var curve = s.path("M50,50 C100,0 150,100 200,50");
curve.attr({
    stroke: "#00f",
    strokeWidth: 3,
    fill: "none",
    markerEnd: arrowMarker
});

Snap.svg автоматически поворачивает маркер в направлении касательной к кривой в конце пути.

Динамическая замена маркеров

Маркеры можно менять в процессе выполнения программы:

curve.attr({markerEnd: complexMarker});

Это позволяет создавать анимации, где маркер изменяется в зависимости от состояния объекта.

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

  • Всегда задавать refX и refY для точного позиционирования маркера.
  • Использовать markerUnits: "strokeWidth" для линий с переменной толщиной.
  • Для сложных форм маркера объединять элементы через add().
  • Для кривых и многоугольников orient: "auto" обеспечивает естественное направление.

Пример интеграции нескольких маркеров

var startArrow = s.marker(0, 0, 10, 10, 0, 5);
startArrow.add(s.path("M10,0 L0,5 L10,10 Z"));

var midCircle = s.marker(0, 0, 6, 6, 3, 3);
midCircle.add(s.circle(3, 3, 3));

var path = s.path("M10,50 L150,50 L150,150");
path.attr({
    stroke: "#333",
    strokeWidth: 4,
    fill: "none",
    markerStart: startArrow,
    markerMid: midCircle,
    markerEnd: arrowMarker
});

В результате получаем линию с разными маркерами на начале, середине и конце, что позволяет создавать наглядные диаграммы и визуализировать направления.

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

Оглавление