CSS marker-mid Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The marker-mid property specifies which marker graphic should be used at the intermediate vertices of a shape or path when styling SVG with CSS. In practice it tells the renderer what marker to draw at each interior corner or joint of elements such as paths, polylines and polygons, so you can decorate every midpoint between segments (for example to place arrowheads, dots, or decorative shapes at each vertex) without touching the SVG markup for each vertex. It is one of the trio of marker properties that let you target the start, interior, and end positions of a stroked geometry.

When used together with its counterparts you can precisely control how a stroked line is annotated: for example, use marker-start to set a shape at the beginning of a subpath, and marker-end to set a shape at the terminal point, while marker-mid deals only with the interior breakpoints between segments. Because marker placement happens after path construction, the visual result depends on the path’s vertices and joins; a single long smooth segment with no explicit interior vertices will not get mid markers, whereas polylines and paths with multiple subpath segments will.

From a design perspective marker-mid is useful for repeating motifs along a line (rail- or chain-like visuals), signaling direction changes in diagrams, or marking intersections. It is applied as a presentation style so you can swap marker graphics or remove them dynamically without changing the SVG structure. Keep in mind that markers are drawn in their own coordinate system and can interact with stroke width, transforms, and path topology, so adjusting stroke, path commands, or marker definitions together yields consistent, predictable decorations.

Definition

Initial value: none
Applies to: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> elements in an svg
Inherited: yes
Computed value: as specified, but with <url> values made absolute
Animatable: yes
JavaScript syntax: object.style.markerMid

Syntax

marker-mid: none | <url> | <string>;

Values

none Default value. No marker is drawn in the middle of the path.
<url>References an SVG <marker> defined elsewhere in the document
<string>Some legacy implementations allow simple strings like "circle" or "square", but this is mostly deprecated.

Example

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" class="demo-svg">

    <defs>

        <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">

            <path d="M0,0 L10,5 L0,10 z" fill="#e74c3c" />

        </marker>

        <marker id="dot" markerWidth="6" markerHeight="6" refX="3" refY="3">

            <circle cx="3" cy="3" r="2" fill="#2ecc71" />

        </marker>

        <marker id="circle" markerWidth="8" markerHeight="8" refX="4" refY="4">

            <circle cx="4" cy="4" r="3" fill="#3498db" />

        </marker>

    </defs>



    <polyline class="poly" points="10,40 40,10 80,70 110,40 140,10 190,40" stroke="#34495e" stroke-width="4" fill="none" />



    <text x="10" y="18" font-size="12" fill="#34495e">marker-mid example</text>

</svg>

CSS

.demo-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 20px auto;
    background: #fbfbfd;
    border: 1px solid #e1e4e8;
    padding: 8px;
}

.poly {
    stroke-linecap: round;
    stroke-linejoin: round;
    marker-start: url(#circle);
    marker-mid: url(#dot);
    marker-end: url(#arrow);
    transition: stroke 200ms ease;
}

/* hover to swap mid marker for demonstration */
.poly:hover {
    marker-mid: url(#arrow);
    stroke: #2c3e50;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS marker-mid property. Hover over a browser icon to see the version that first introduced support for this CSS property.