marker-start
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
The marker-start
CSS property points to a marker that will be drawn on the first vertex of the element's path; that is, at its starting vertex. The marker must have been defined using an SVG
element, and can only be referenced with a
value. The value of the CSS property overrides any values of the marker-start
attribute in the SVG.
For many marker-supporting shapes, the first and last vertices are in the same place: for example, the top left corner of a
. In such shapes, if both the first and last markers are defined, two markers will be drawn at that point, though they may not point in the same direction.
Note:
The marker-start
property will only have an effect for elements that can use SVG markers. See marker-start
for a list.
Syntax
marker-start: none;
marker-start: url(markers.svg#arrow);
/* Global values */
marker-start: inherit;
marker-start: initial;
marker-start: revert;
marker-start: revert-layer;
marker-start: unset;
Values
none
-
This means no marker will be drawn at the first vertex of the element's path.
-
A
that refers to a marker defined by an SVG
element, to be drawn at the first vertex of the element's path. If the URL reference is invalid, no marker will be drawn at the path's first vertex.
Formal definition
Initial value | none |
---|---|
Applies to | , , , , , , and elements in an svg |
Inherited | yes |
Computed value | as specified, but with values made absolute |
Animation type | discrete |
Formal syntax
Example
polyline#test {
marker-start: url(#triangle);
}
Specifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # MarkerStartProperty |
Browser compatibility
See also
marker-mid
marker-end
marker
- SVG
marker-start
attribute