SVG marker служит для указания направления, начала, середины, конца линии (line) или пути (path), а также маркеры могут быть применены для элементов SVG – polyline и polygon.
Графическое изображение маркера задается внутри тегов <marker> … </marker > в секции <defs> файла SVG с помощью элементов: line, polyline, path, rect, circle.
Маркеру присваивается уникальное имя с помощью индефикатора id=”…”. Созданный таким образом маркер может быть использован далее один или несколько раз, в одном или нескольких файлах SVG.

Тип маркеров

Маркеры бывают следующих типов: marker-start, marker-mid, marker-end. Каждый тип указывают на расположение маркера, соответственно в начале, середине, конце линии или пути, к которым они присоединяются. На рисунке выше в качестве начального маркера marker-start использован круг (circle). Конечный маркер marker-end создан с помощью пути (path), нарисовавшего стрелку.

Атрибуты маркеров

Атрибуты markerWidth и markerHeight

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

Вместе с этой областью просмотра маркера создается новая система координат с начальной точкой отсчета (0,0) в верхнем левом углу этой области. Именно от этой начальной точки новой системы координат будет идти расчет и отрисовка графических фигур маркера. В свою очередь прямоугольная область просмотра маркера присоединяется своим верхним левым углом к началу или концу линии, в зависимости от указанного в кода типа маркера.

На рисунке 2 показаны четыре зеленые линии в разных положениях, к концу каждой линии присоединен однотипный концевой маркер marker-end розового цвета, созданный с помощью прямоугольника шириной 20px и высотой 10px. Область просмотра маркера ограничена прямоугольником 40х40px.

Позиционирование маркера

Позиционирование маркера относительно линии, к вершине которой он присоединяется, осуществляется с помощью атрибутов: refX, refY, orient и viewBox.
Начнем с атрибута маркера orient, который отвечает за поворот области отрисовки и соответственно новой системы координат маркера отностительно системы координат viewport. По умолчанию orient=”0″ градусов.

На этом рисунке виден результат присвоения атрибуту значения отличного от нуля. При orient=”30″ область просмотра и сиcтема координат маркера поворачивается по часовой стрелке на 30 градусов. При отрицательных значениях orient поворот области просмотра и соответственно маркера будет против часовой стрелки.

Позволяет соориентировать маркер вдоль линии или пути. Разработчики предположили, что длина (width) маркера, на самом деле, длина области просмотра маркера – markerWidth должна быть больше его высоты. Поэтому более длинной стороной маркер при атрибуте orient=”auto” распологается в продолжении линии, к которой присоединен. Если длина области просмотра маркера меньше её высоты, то всё равно он будет расположен так, что его длина(ширина) области просмотра markerWidth будет расположена в продолжении линии или пути. На рис.4 показано стрелками, как будет вращаться области просмотра маркеров, чтобы совместить markerWidth с продолжением линии или пути.

В коде выше для формирования графики маркера использованы две основные фигуры SVG: прямоугольник и окружность, которые расположены в одной прямоугольной области просмотра маркера, ограниченной сторонами markerWidth и markerHeight. Могут быть и более сложные комбинации.

На рис.6 видно, что orient=”auto” помогло только частично. Для правильного расположения маркера необходимо его сдвинуть влево на 20px и поднять вверх на 40px. Для этих целей служат атрибуты маркера refX и refY. При положительных значениях refX маркер сдвигается влево, при отрицательных значениях происходит сдвиг вправо. Для refY положительные значения сдвигают маркер вверх, отрицательные вниз.

Пример анимации здесь.

Атрибут markerUnits имеет значение по умолчанию – “strokeWidth”, то есть его можно и не писать в определении маркера, но он всё равно будет оказывать своё действие на масштабирование маркера. Видимо разработчики SVG задумывали это свойство атрибута следуя логике, что маркер, как правило, это стрелка, которая имеет небольшие размеры и если толщина линии, к которой присоединен маркер увеличивается, то должен пропорционально увеличиваться и сам маркер.

При markerUnits=”strokeWidth”, см. 8-ую строку кода, масштаб маркера зависит от толщины линии, указанной в 17-ой строке – stroke-width:1; При таких значениях масштаб отображения маркера будет 1:1 см. Рис.9. При значении stroke-width:4; Размеры маркера увеличатся ровно в 4 раза см. Рис.10.

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

Крылья мельницы не напоминают маркеры на Рис.5 этой статьи? 🙂 Да, код взят оттуда, добавлены украшательства и две кнопки: мужской силуэт запускает анимацию при наведении курсора мышки, женский силуэт останавливает анимацию.

Этот пример иллюстрирует рисунки: Рис.6,7 и 8 (см.выше) – на которых изображена коррекция положения маркера относительно линии, к которой он присоединён. Параметр refX отвечает за перемещение маркера вдоль оси x-ов, параметр refY перемещает маркер по оси “y”. В этом примере анимацию запускает “клик” мышки по кнопке “Start” begin=”startButton.click”. Маркер сначала поднимается по “y”, затем перемещается по оси “x”. Вторая анимация начинётся по команде: begin=”refY1.end+1s” то есть после окончания первой анимации, вторая часть анимации начинается через 1 секунду (см. 25-28 строки листинга ниже).

Продолжение. Примеры анимации маркеров ⇛
⇚ viewport и ViewBox SVG pattern element ⇛