`marker-mid` CSS property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

See full compatibility

The marker-mid CSS property points to a marker that will be drawn on the middle vertices of the element's path; that is, at each of its vertices between the start and end vertices. The marker must have been defined using an SVG <marker> element, and can only be referenced with a <url> value. The value of the CSS property overrides any values of the marker-mid attribute in the SVG.

The direction each marker points is defined as the direction halfway between the direction at the end of the preceding path segment and the direction of the start of the following path segment. This can be thought of as the cross product of the vectors defined by the two path directions.

Note: The marker-mid property will only have an effect for elements that can use SVG markers. See marker-mid for a list.

Syntax

css

marker-mid: none;
marker-mid: url("markers.svg#arrow");

/* Global values */
marker-mid: inherit;
marker-mid: initial;
marker-mid: revert;
marker-mid: revert-layer;
marker-mid: unset;

Values

none: This means no marker will be drawn at each middle vertex of the element's path.
<marker-ref>: A <url> that refers to a marker defined by an SVG <marker> element, to be drawn at each middle vertex of the element's path. If the URL reference is invalid, no marker will be drawn at the path's middle vertices.

Formal definition

Initial value	`none`
Applies to	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>`, and `<rect>` elements in an `svg`
Inherited	yes
Computed value	as specified, but with `<url>` values made absolute
Animation type	discrete

Formal syntax

marker-mid = 
  none          |
  <marker-ref>  

<marker-ref> = 
  <url>

Example

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

html

<svg viewBox="0 0 240 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="triangle"
      viewBox="0 0 10 10"
      markerWidth="10"
      markerHeight="10"
      refX="1"
      refY="5"
      markerUnits="strokeWidth"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="red" />
    </marker>
  </defs>
  <polyline
    id="test"
    fill="none"
    stroke="black"
    points="20,100 40,60 70,80 100,20 130,10 150,10 170,20 170,100 120,100" />
</svg>

css

polyline#test {
  marker-mid: url("#triangle");
}

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # MarkerMidProperty

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`marker-mid`	Chrome – Full support Chrome 1 (Release date: 2008-12-11) footnote Full support	Edge – Full support Edge 15 (Release date: 2017-04-05) footnote Full support	Firefox – Full support Firefox 3 (Release date: 2008-06-17) footnote Full support	Opera – Full support Opera 15 (Release date: 2013-07-02) footnote Full support	Safari – Full support Safari 4 (Release date: 2009-06-08) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – Full support Firefox for Android 4 (Release date: 2011-03-29) footnote Full support	Opera Android – Full support Opera Android 14 (Release date: 2013-05-21) footnote Full support	Safari on iOS – Full support Safari on iOS 3.2 (Release date: 2010-04-03) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 3.2 (Release date: 2010-04-03) footnote Full support
`none`	Chrome – Full support Chrome 1 (Release date: 2008-12-11) footnote Full support	Edge – Full support Edge 15 (Release date: 2017-04-05) footnote Full support	Firefox – Full support Firefox 3 (Release date: 2008-06-17) footnote Full support	Opera – Full support Opera 15 (Release date: 2013-07-02) footnote Full support	Safari – Full support Safari 4 (Release date: 2009-06-08) footnote Full support	Chrome Android – Full support Chrome Android 18 (Release date: 2012-06-27) footnote Full support	Firefox for Android – Full support Firefox for Android 4 (Release date: 2011-03-29) footnote Full support	Opera Android – Full support Opera Android 14 (Release date: 2013-05-21) footnote Full support	Safari on iOS – Full support Safari on iOS 3.2 (Release date: 2010-04-03) footnote Full support	Samsung Internet – Full support Samsung Internet 1 (Release date: 2013-04-27) footnote Full support	WebView Android – Full support WebView Android 4.4 (Release date: 2013-12-09) footnote Full support	WebView on iOS – Full support WebView on iOS 3.2 (Release date: 2010-04-03) footnote Full support

Tip: you can click/tap on a cell for more information.

Full support: Full support

marker-mid CSS property

Legend

`marker-mid` CSS property