CSS marker-mid Property - Playground Example

<!DOCTYPE html><html><head><style type="text/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;
}
</style></head><body><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></body></html>