Маркер SVG <marker>

Теги SVG используются для начала, середины и конца строк или путей. Например, можно использовать круг или квадрат в качестве начального тега для пути, а стрелку в качестве конечного тега для пути. Элемент marker определяет рисование стрелок или многоугольных маркеров на специфических элементах <path>, <line>, <polyline> или <polygon>.

Онлайн пример Marker

Это простая визуальная демонстрация внешнего вида маркера:

Маркер создается с помощью элемента <marker>. Элемент <marker> должен быть вложен в элемент <defs>. Элемент <defs> обычно используется для сохранения группы повторно используемых определений для SVG-изображения.
Это SVG-код примера上面的 графики:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5">
　　　　　　　　　　　　<circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"></circle>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto">
　　　　　　　　　　　　<path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;"></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,10 L150,10 L150,60" style="stroke: #6666ff; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerCircle);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　</path>
</svg>

Сначала обратите внимание, что в элементе <defs> содержатся два элемента <marker>, которые определяют начальный и конечный маркеры, показанные на рисунке.
Кроме того, обратите внимание, как элемент <path> использует CSS-атрибуты mark-start и marker-end для ссылки на два элемента <mark> из его атрибута style. Это способ указать маркер, который будет использоваться для данного пути. Об этом я еще поговорю позже.

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

Вы можете определить маркер с помощью элемента <marker>. Вот пример:

<marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
　　　　<circle cx="5" cy="5" r="3" style="stroke: none; fill:#000000;"/>
</marker>

В данном примере определен маркер с шириной 8 (markerWidth = "8") и высотой 8 (markerHeight = "8"). Поскольку маркер является отдельным графическим элементом, необходимо явно установить ширину и высоту.

Атрибут id элемента <mark> используется для ссылки на этот маркер из элемента <path>.

Установленные координаты refX и refY точки внутри маркера служат в качестве точки参照ения. Точка参照ения - это точка, на которой маркер расположен в начале пути. В данном примере refX и refY установлены в центр круга, что означает, что центр круга будет расположен в начале пути. Если не установить refX и refY, они будут по умолчанию равны 0, что сделает верхний левый угол маркера начальной точкой пути.

Внутри элемента <marker> находится элемент <circle>. Элемент circle определен с центром в (cx, cy) = (5, 5). Центр点是 центром виртуального прямоугольника маркера. Это не положение, где он фактически размещен на изображении. Размер виртуального прямоугольника в элементе <marker> устанавливается с помощью markerWidth и markerHeight в 8.8.}

Автоматическое направление

Вот другой пример определения <marker>. В этом примере определен треугольник, используемый в качестве стрелки пути.

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
</svg>

Элемент <path> в элементе <marker> рисует треугольник с尖ом, направленным вправо. Но если путь не является горизонтальной линией,则需要 повернуть треугольник, чтобы он соответствовал направлению используемого пути. Это можно сделать, установив атрибут "ориентации" (orient) в "автоматический" (auto). Это вращает форму внутри элемента <marker>, чтобы соответствовать пути, на который он ссылается.

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

Результат выполнения:

Вот результат установки свойства orient элемента <mark> в auto.

También можно установить значение свойства orient в фиксированное количество градусов (например, 45 градусов). Это будет вращать маркер на указанное количество градусов при его использовании. Однако, это не так полезно, как автоматическое направление.

Ссылка на маркер из пути

Вы можете использовать следующие свойства CSS для ссылки на маркер из пути:

• marker-start

• marker-mid

• marker-end

Эти три свойства CSSassignют маркер к началу, середине и концу пути.

Свойства CSS должны быть расположены в атрибуте style элемента <path>, который их использует. Вы можете ссылаться на элемент <marker> через его атрибут id, как показано ниже:

marker-start : url(#markerId);

markerId должен быть заменен значением属性 id элемента <mark>.

Это пример использования всех трех свойств CSS:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marker>
　　　　　　　　<marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2 L2,13 L8,7 L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marker>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width: 1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　</path>
</svg>

Результат выполнения будет выглядеть следующим образом:

Использование маркеров из других форм

Элемент <path> не единственный, кто может использовать маркеры в SVG. 　 Элементы <line>, <polyline> и <polygon> также могут использовать маркеры. Они работают точно так же, как и элемент <path>: через ссылку на атрибут id элемента <marker> в CSS-атрибутах marker-start, marker-mid и marker-end. Например:

Единицы маркера

Размер маркера можно настроить на масштабирование, чтобы он соответствовал ширине контура используемого пути. Вот визуальный пример:

Эффект можно реализовать, установив значение свойства markerUnits элемента <marker> в strokeWidth. Это其实是该属性的默认值，因此，даже если вы не установили атрибут markerUnits, это будет по умолчанию. Вот как это выглядит в SVG-коде:

<marker id="markerSquare" markerWidth="7" markerHeight="7" refX="4" refY="4"}
　　　　orient="auto" markerUnits="strokeWidth">
　　　　<rect x="1" y="1" width="5" height="5" style="stroke: none; fill:#000000;"/>
</marker>

Чтобы избежать автоматического масштабирования маркера, чтобы он соответствовал ширине контура пути, установите атрибут markerUnits в userSpaceOnUse. Таким образом, маркер будет поддерживать свой размер, независимо от ширины контура пути, который его использует.