W3cubDocs

/SVG

marker-end

The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final 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-end is only rendered on the final vertex of the path data.

Note: As a presentation attribute, marker-end 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">
  <defs>
    <marker id="triangle" viewBox="0 0 10 10"
          refX="1" refY="5" 
          markerUnits="strokeWidth"
          markerWidth="10" markerHeight="10"
          orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00"/>
    </marker>
  </defs>
  <polyline fill="none" stroke="black" 
      points="20,100 40,60 70,80 100,20" marker-end="url(#triangle)"/>
</svg>

Usage notes

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

Specifications

Browser compatibilityUpdate compatibility data on GitHub

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

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/marker-end