CSS marker Property
Example
Point to a marker (arrow) that will be drawn on the first, middle, and last vertices of an element's path:
#test {
marker: url(#arrow);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The marker property points to a marker that
will be drawn on all vertices of an element's path (the first, middle, and
last).
The shape of the marker is defined with an SVG <marker> element, and is referenced with a url() value.
The value of the CSS marker property
overrides any values of the marker-start, marker, and marker-end attributes in
the SVG.
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| marker | 80 | 80 | 72 | 13.1 | 67 |
CSS Syntax
marker: none|url|initial|inherit;
Property Values
| Value | Description |
|---|---|
| none | Default. No marker will be drawn at the path |
| url | An url reference to a marker defined by an SVG <marker> element |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Point to a marker (circle) that will be drawn on the first, middle, and last vertices of an element's path:
#test {
marker: url(#circle);
}
Try it Yourself »
Related Pages
CSS reference: marker-start property
CSS reference: marker-mid property
CSS reference: marker-end property
SVG tutorial: SVG Marker
