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
Specification |
---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) # VertexMarkerProperties |
Browser compatibility
BCD tables only load in the browser