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. See marker-end
for more.
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) 2 # VertexMarkerProperties |
Browser compatibility
BCD tables only load in the browser
See also
<marker>
marker-start
marker-mid
- CSS
marker-end
property