Создание маркеров

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

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

Маркеры в SVG создаются с помощью тега <marker>, который помещается внутрь <defs> для последующего использования. В Snap.svg это делается через метод paper.marker():

var paper = Snap(800, 600);

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

Параметры marker():

  • width и height — размеры области, занимаемой маркером.
  • refX и refY — точка, на которую будет ориентирован маркер при привязке к линии.
  • markerUnits — единицы измерения маркера. По умолчанию "strokeWidth", что позволяет маркеру масштабироваться с толщиной линии.

Применение маркеров к элементам

После создания маркера его можно присоединить к линиям, кривым и полигонам через атрибуты marker-start, marker-mid и marker-end:

var line = paper.line(50, 50, 300, 50).attr({
    stroke: "#f00",
    strokeWidth: 5,
    markerEnd: arrow
});
  • marker-start — маркер в начале линии.
  • marker-mid — маркеры для промежуточных точек (важно для полилиний и кривых).
  • marker-end — маркер в конце линии.

Snap.svg автоматически конвертирует объект marker в корректный SVG <marker> и применяет его к выбранному элементу.

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

Маркер может содержать несколько элементов: линии, кривые, круги, текст. Для сложных маркеров создается группа внутри маркера:

var complexMarker = paper.marker(20, 20, 40, 40, 20, 20);
var group = paper.g();
group.add(
    paper.path("M0,0 L40,20 L0,40 Z").attr({ fill: "#00f" }),
    paper.circle(20, 20, 5).attr({ fill: "#ff0" })
);
complexMarker.add(group);

var polyline = paper.polyline([50, 150, 300, 150, 300, 200]).attr({
    stroke: "#333",
    strokeWidth: 4,
    fill: "none",
    markerEnd: complexMarker
});

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

Вращение и масштабирование маркеров

Атрибут orient отвечает за ориентацию маркера:

arrow.attr({ orient: "auto" });
  • "auto" — маркер поворачивается согласно направлению линии.
  • Конкретное значение в градусах позволяет зафиксировать угол.

Масштабирование маркера зависит от markerUnits:

  • "strokeWidth" — масштабируется с толщиной линии.
  • "userSpaceOnUse" — размер маркера фиксирован независимо от толщины линии.

Использование markerUnits: "userSpaceOnUse" особенно удобно для точных схем и чертежей.

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

Маркер можно изменить после его создания, что позволяет динамически изменять графику:

arrow.clear(); // удаляет все содержимое
arrow.add(paper.path("M0,0 L20,10 L0,20 Z").attr({ fill: "#0f0" }));
line.attr({ markerEnd: arrow }); // обновление линии с новым маркером

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

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

Для кривых Безье маркеры работают аналогично:

var curve = paper.path("M100,300 C150,100 250,500 300,300").attr({
    stroke: "#900",
    strokeWidth: 4,
    fill: "none",
    markerEnd: arrow
});

Snap.svg корректно вычисляет угол наклона маркера для кривой, обеспечивая естественное направление стрелки на конце.

Практические советы

  • Использовать отдельные <defs> для хранения всех маркеров, чтобы переиспользовать их на разных элементах.
  • Для полилиний с множеством сегментов использовать marker-mid, чтобы маркеры отображались на всех внутренних точках.
  • Для тонких линий рекомендуется использовать markerUnits: "strokeWidth", чтобы маркер масштабировался пропорционально линии.
  • Проверять визуальную читаемость сложных маркеров при масштабировании — иногда требуется фиксированный размер через "userSpaceOnUse".

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

Оглавление