<marker>
========

The **`<marker>`** element defines a graphic used for drawing arrowheads or polymarkers on a given `<path>`, `<line>`, `<polyline>` or `<polygon>` element.

Markers can be attached to shapes using the `marker-start`, `marker-mid`, and `marker-end` properties.

Examples
--------

### Drawing arrowheads

 The following example shows how to draw an arrowhead on a line and on a curved path.
 For the curved path, an arrowhead is drawn at each point with a `marker-mid` marker.
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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>
```

### Drawing polymarkers
```

html,
body,
svg {
  height: 100%;
}
```



```html
<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>
```

### Using context fill and stroke

The following example shows how to use the `context-fill` and `context-stroke` values to make a marker use the same fill and stroke as the shape it is attached to.


```html
<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>
```


```
html,
body,
svg {
  height: 100%;
}
```

Attributes
----------

`markerHeight`

 This attribute defines the height of the marker viewport.
 *Value type*: **<length>** ; *Default value*: `3`; *Animatable*: **yes**

`markerUnits`

 This attribute defines the coordinate system for the attributes `markerWidth`, `markerHeight` and the contents of the `<marker>`.
 *Value type*: `userSpaceOnUse`|`strokeWidth` ; *Default value*: `strokeWidth`; *Animatable*: **yes**

`markerWidth`

 This attribute defines the width of the marker viewport.
 *Value type*: **<length>** ; *Default value*: `3`; *Animatable*: **yes**

`orient`

 This attribute defines the orientation of the marker relative to the shape it is attached to.
 *Value type*: `auto`|`auto-start-reverse`|**<angle>** ; *Default value*: `0`; *Animatable*: **yes**

`preserveAspectRatio`

 This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
 *Value type*: (`none`| `xMinYMin`| `xMidYMin`| `xMaxYMin`| `xMinYMid`| `xMidYMid`| `xMaxYMid`| `xMinYMax`| `xMidYMax`| `xMaxYMax`) (`meet`|`slice`)? ; *Default value*: `xMidYMid meet`; *Animatable*: **yes**

`refX`

 This attribute defines the x coordinate for the reference point of the marker.
 *Value type*: `left`|`center`|`right`|**<coordinate>** ; *Default value*: `0`; *Animatable*: **yes**

`refY`

 This attribute defines the y coordinate for the reference point of the marker.
 *Value type*: `top`|`center`|`bottom`|**<coordinate>** ; *Default value*: `0`; *Animatable*: **yes**

`viewBox`

 This attribute defines the bound of the SVG viewport for the current SVG fragment.
 *Value type*: **<list-of-numbers>** ; *Default value*: none; *Animatable*: **yes**

### Global attributes

Core Attributes

Most notably: `id`, `tabindex`

Styling Attributes
`class`, `style`
Conditional Processing Attributes

Most notably: `requiredExtensions`, `systemLanguage`

Presentation Attributes

Most notably: `clip-path`, `clip-rule`, `color`, `color-interpolation`, `color-rendering`, `cursor`, `display`, `fill`, `fill-opacity`, `fill-rule`, `filter`, `mask`, `opacity`, `pointer-events`, `shape-rendering`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity`, `stroke-width`, `transform`, `vector-effect`, `visibility`

ARIA Attributes

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

Usage notes
-----------

|  |  |
| --- | --- |
| Categories | Container element |
| Permitted content | Any number of the following elements, in any order:Animation elementsDescriptive elementsShape elementsStructural elementsGradient elements`<a>`, `<clipPath>`, `<color-profile>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>` |

Specifications
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # MarkerElement |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Related marker properties: `marker-start`, `marker-mid`, and `marker-end`