Учитывая, что одной из распространенных целей SVG является создание диаграмм и иллюстраций, вполне логично, что завершение линий и путей стрелками — очень распространенный запрос. Хотя можно украсить линию собственной индивидуальной формой стрелки, закодированной вручную, гораздо эффективнее создать шаблон стрелки с помощью элемента <marker>.

Вы можете добавить стрелку к элементам line, polyline, polygon и path.
Форма стрелки определяется в элементе маркера, который размещается внутри <defs> в начале вашего SVG:

Результат:

В принципе, любую форму, линию или набор элементов можно нарисовать внутри этого пространства в виде стрелки. В данном случае фигура представляет собой треугольник, который касается верхнего левого и нижнего левого углов области маркера, а точка касается крайней правой стороны. <line>, в нижней части SVG ссылается на этот маркер через его <id>.

Атрибуты refX и refY позиционируют маркер относительно конца пути.
Установка этих значений на 0 (по умолчанию) поместит верхний левый угол <marker> на конец строки.
В случае сплошной стрелки значения конечной стрелки будут равны 0 для положения X и половине высоты маркера для положения Y.

Установка ориентации на автоматическое выравнивание стрелки orient=”auto” по направлению пути.
Мы можем увидеть эффект этого, если изменим начальную или конечную точку линии, чтобы линия была не горизонтальна.

Параметр “auto” выравнивает маркер вдоль пути.

После того как маркер определен, его можно использовать повторно столько раз, сколько пожелаете. Очевидным применением является создание путей или линий с двунаправленными стрелками с использованием marker-start и marker-end.
Однако если вы примените один и тот же элемент <marker> к обоим концам, они оба будут указывать в одном направлении:

Лучшим подходом будет создание двух отдельных стрелок, ссылающихся на них по отдельности:

Что создает:

В принципе, должна быть возможность создать одиночный <symbol>, который преобразуется в стрелку с соответствующей ориентацией для любого конца строки. Это немного сложнее, чем может показаться на первый взгляд, поэтому я оставлю эту технику для следующей статьи.

Все примеры до сих пор были адаптивными, что означает, что и стрелка(и), и толщина линии будут изменяться в зависимости от ширины области просмотра (viewport). В некоторых случаях вам может понадобиться, чтобы линия и стрелки меняли размер, но не толщину, обычно на практике они остаются в виде тонких линий.

Этот пример создан из следующего кода:

В данном случае стрелка является элементом <polyline>. Маркеры не могут наследовать обводку или заливку элемента, к которому они прикреплены, но им легко придать одинаковый внешний вид с помощью сгруппированного комбинатора в таблице стилей, как показано выше.
Значением по умолчанию для атрибута MarkerUnits является StrokeWidth (по этой причине он не применяется в приведенных выше примерах). Он определяет систему координат для маркера: по сути, масштаб стрелки относительно пути. strokeWidth связывает размер маркера с обводкой пути; userSpaceOnUse использует текущую систему координат.
Использование этого в сочетании с vector-effect: non-scaling-stroke эффективно создает линию пути и стрелку при любом размере браузера; в этом случае я также манипулировал значениями refX, refY и orient, чтобы «закрепить» стрелку polyline на пути и придать ей более эстетичное направление.

Хотя создание маркеров в первый раз может оказаться немного сложной задачей, их адаптируемость и возможности повторного использования делают их идеальными для иллюстраций. Есть и другие варианты использования маркеров, включая украшение самого контура; Оставлю это для следующей статьи.

Фотография Julien Belli, использована под лицензией Creative Commons Attribution 2.0 Generic.
Перевод статьи: Making Arrows in SVG@dudleystorey