CSS marker-mid property

Definition and Usage

marker-mid The attribute points to a marker that will be drawn at all the midpoints of the element's path.

The shape of the marker is defined by the SVG <marker> element and is referenced by the url() value.

CSS marker-mid The value of the attribute will override the value of the marker-mid attribute in SVG.

Example

Example 1

Point to a marker (arrow) that will be drawn at all the midpoints of the element's path:

#test {
  marker-mid: url(#arrow);
}

Try It Yourself

Example 2

Point to a marker (circle) that will be drawn at all the midpoints of the element's path:

#test {
  marker-mid: url(#circle);
}

Try It Yourself

CSS Syntax

marker-mid: none;url|initial|inherit;

Attribute Value

Value Description
none Default value. No marker will be drawn at the midpoint of the path.
url Reference to the URL of the marker defined by the SVG <marker> element.
initial Set this attribute to its default value. See initial.
inherit Inherit this attribute from its parent element. See inherit.

Browser Support

The numbers in the table represent the browser version that first fully supports this attribute.

Chrome Edge Firefox Safari Opera
80 80 72 13.1 67

Related Pages

Tutorial:SVG Markups

Reference:CSS marker property

Reference:CSS marker-start property

Reference:CSS marker-end property