marker-end

Baseline Widely available

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

Themarker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the givenshape.

For all shape elements, except<polyline> and<path>, the last vertex is the same as the first vertex. In this case, if the value ofmarker-start andmarker-end are both notnone, 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 thepath data.

Note:As a presentation attribute,marker-end also has a CSS property counterpart:marker-end. When both are specified, the CSS property takes priority.

You can use this attribute with the following SVG elements:

Example

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

html

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">  <defs>    <marker           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="red" />    </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.