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 ⁨July 2020⁩.

The marker-start attribute defines the arrowhead or polymarker that will be drawn at the first 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-start is only rendered on the first vertex of the path data.

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

You can use this attribute with the following SVG elements:

Example

Usage notes

Value	`none` \| `<marker-ref>`
Default value	`none`
Animatable	discrete

none: Indicates that no marker symbol shall be drawn at the first vertex.
<marker-ref>: This value is a reference to a <marker> element, which will be drawn at the first vertex. If the reference is not valid, then no marker will be drawn.