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.

You can use this attribute with the following SVG elements:

Example

<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 compatibility

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

See also

© 2005–2021 MDN 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