The marker-start attribute defines the arrowhead or polymarker that will be drawn at the first vertex of the given shape.

For all shape elements, except <polyline> and <path>, the last vertex is the same as the first vertex. In this case, if the value of marker-start and marker-end are both not none, then two markers will be rendered on that final vertex. For <path> elements, for each closed subpath, the last vertex is the same as the first vertex. marker-start is only rendered on the first vertex of the path data.

Note: As a presentation attribute, marker-start can be used as a CSS property.

As a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
    <marker id="triangle" viewBox="0 0 10 10"
          refX="1" refY="5" 
          markerWidth="10" markerHeight="10"
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00"/>
  <polyline fill="none" stroke="black" 
      points="20,100 40,60 70,80 100,20" marker-start="url(#triangle)"/>

Usage notes

Value none | <marker-ref>
Default value none
Animatable discrete
Indicates that no marker symbol shall be drawn at the first vertex.
This value is a reference to a <marker> element, which will be drawn at the first vertex. If the reference is not valid, then no marker will be drawn.


Browser compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
marker-start ? ? ? ? ? ?
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
marker-start ? ? ? ? ? ?

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.