SVG marker element

Mark-lineSVG 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), нарисовавшего стрелку.

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

Атрибут Описание
viewBox позволяет перемещать,масштабировать маркер.
markerWidth и markerHeight длина и высота прямоугольной области, в которой располагается маркер
refX перемещает курсор по оси абцисс влево при положительных значениях .
refY перемещает курсор по оси ординат.
markerUnits отвечает за масштабирование маркера в зависимости от увеличения, уменьшения толщины линии, к которой присоединяется маркер. Значение по умолчанию – strokeWidth.
orient “auto | <angle>” отвечает за ориентацию маркера относительно линии.

Атрибуты markerWidth и markerHeight

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

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

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

Рис.2

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

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

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

Другими словами при создании маркера всегда есть две области просмотра и две системы координат. Первая область просмотра это – viewport c системой координат с начальной точкой отсчета (0,0) в верхнем левом углу холста SVG. Именно в этой области происходит отображение линий, путей. Вторая или новая область просмотра маркера и новая система координат с начальной точкой отсчета образуется на конце или начале линий первой области просмотра см. Рис.3.

fourth-marker-orient-30

Рис.3

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

Автоматическая ориентация маркера orient=”auto”

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

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

Какой бы ни была геометрическая форма маркера он всегда при orient=”auto” будет сооринтирован таким образом, чтобы сторона markerWidth области просмотра маркера распологалась в продолжении линии или пути, к которым присоединяется маркер.
Коррекция положения маркера по оси абцисс и ординат с помощью refX, refY

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

refYYes-refY-refX Пример анимации здесь.

Масштабирование размеров маркера при markerUnits=”strokeWidth”

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

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

Применение значения параметра markerUnits=”userSpaceOnUse” не изменяет автоматически масштаб маркера при изменении толщины линии, к которой он присоединён.
Примеры анимации маркеров SVG. Examples of SVG animation


Крылья мельницы не напоминают маркеры на Рис.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 ⇛

Добавить комментарий