<marker>

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на множестве устройств и в разных версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015 г.⁩.

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

Маркеры можно прикрепить к фигурам с помощью свойств marker-start, marker-mid и marker-end.

Контекст использования

Категории Элемент-контейнер

Допустимое содержимое Любое количество следующих элементов в любом порядке:
Элементы анимации
Описательные элементы
Элементы фигур
Структурные элементы
Элементы градиента
<a>, <clipPath>, <filter>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

Категории	Элемент-контейнер
Допустимое содержимое	Любое количество следующих элементов в любом порядке: Элементы анимации Описательные элементы Элементы фигур Структурные элементы Элементы градиента `<a>`, `<clipPath>`, `<filter>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Атрибуты

markerHeight: Этот атрибут задаёт высоту области просмотра маркера. Тип значения: <length>; Значение по умолчанию: 3; Анимируемый: да
markerUnits: Этот атрибут задаёт систему координат для атрибутов markerWidth, markerHeight и содержимого элемента <marker>. Тип значения: userSpaceOnUse | strokeWidth; Значение по умолчанию: strokeWidth; Анимируемый: да
markerWidth: Этот атрибут задаёт ширину области просмотра маркера. Тип значения: <length>; Значение по умолчанию: 3; Анимируемый: да
orient: Этот атрибут задаёт ориентацию маркера относительно фигуры, к которой он прикреплён. Тип значения: auto | auto-start-reverse | <angle>; Значение по умолчанию: 0; Анимируемый: да
preserveAspectRatio: Этот атрибут задаёт, как следует деформировать SVG-фрагмент, если он встроен в контейнер с другим соотношением сторон. Тип значения: (none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax) (meet | slice)?; Значение по умолчанию: xMidYMid meet; Анимируемый: да
refX: Этот атрибут задаёт координату x опорной точки маркера. Тип значения: left | center | right | <coordinate>; Значение по умолчанию: 0; Анимируемый: да
refY: Этот атрибут задаёт координату y опорной точки маркера. Тип значения: top | center | bottom | <coordinate>; Значение по умолчанию: 0; Анимируемый: да
viewBox: Этот атрибут задаёт границы области просмотра SVG для текущего SVG-фрагмента. Тип значения: <list-of-numbers>; Значение по умолчанию: отсутствует; Анимируемый: да

Интерфейс DOM

Этот элемент реализует интерфейс SVGMarkerElement.

Примеры

Рисование стрелок

В следующем примере показано, как нарисовать стрелку на линии и на кривой. Для кривой стрелка рисуется в каждой точке с помощью маркера marker-mid.

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- A marker to be used as an arrowhead -->
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <!-- A line with a marker -->
  <line
    x1="10"
    y1="10"
    x2="90"
    y2="90"
    stroke="black"
    marker-end="url(#arrow)" />

  <!-- A curved path with markers -->
  <path
    d="M 110 10
       C 120 20, 130 20, 140 10
       C 150 0, 160 0, 170 10
       C 180 20, 190 20, 200 10"
    stroke="black"
    fill="none"
    marker-start="url(#arrow)"
    marker-mid="url(#arrow)"
    marker-end="url(#arrow)" />
</svg>

Рисование повторяющихся маркеров

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Arrowhead marker definition -->
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <!-- Dot marker definition -->
    <marker
      id="dot"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="5"
      markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>

  <!-- Coordinate axes with an arrowhead in both directions -->
  <polyline
    points="10,10 10,90 90,90"
    fill="none"
    stroke="black"
    marker-start="url(#arrow)"
    marker-end="url(#arrow)" />

  <!-- Data line with polymarkers -->
  <polyline
    points="15,80 29,50 43,60 57,30 71,40 85,15"
    fill="none"
    stroke="grey"
    marker-start="url(#dot)"
    marker-mid="url(#dot)"
    marker-end="url(#dot)" />
</svg>

Использование контекстных заливки и обводки

В следующем примере показано, как использовать значения context-fill и context-stroke, чтобы маркер использовал ту же заливку и обводку, что и фигура, к которой он прикреплён.

<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <marker
    id="circle"
    markerWidth="6"
    markerHeight="6"
    refX="3"
    refY="3"
    markerUnits="strokeWidth">
    <circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
  </marker>

  <style>
    path {
      marker: url("#circle");
    }
  </style>

  <path d="M 10,10 30,10 h 10" stroke="black" />
  <path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
  <path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
  <path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>

Спецификации

Спецификация
Масштабируемая векторная графика (SVG) 2> # MarkerElement>

Совместимость с браузерами

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari в iOS	Samsung Internet	WebView для Android	WebView в iOS
`marker`	1	12	1.5	9	3	18	4	14	2	1.0	3	2
`markerHeight`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`markerUnits`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`markerWidth`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`orient`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`refX`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`refY`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2
`viewBox`	1	12	1.5	15	3	18	4	14	2	1.0	4.4	2

См. также

Связанные свойства маркеров: marker-start, marker-mid и marker-end

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/marker