Example
Elements can specify start, mid and end markers separately. Below are examples of start, mid and end markers for all elements that can be marked. Please note that Chrome does not currently (July 2016) calculate auto orientation correctly for start and end markers for polygons (bug# 633012), and also does not correctly place mid markers for arc path segments (bug #583097)
<svg width="800px" height="600px">
<defs>
<marker id="red-chevron"
viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
<path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="red" />
</marker>
<marker id="black-arrow"
viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="red-circle"
viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
<circle fill="red" cx="5" cy="5" r="5" />
</marker>
</defs>
<line x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
<text x="20" y="150"> line: marker-mid not applied</text>
<polyline points="220,20 300,100 400,20" fill="none" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
<text x="250" y="150"> polyline </text>
<polygon points="20,190 100,200 150,300 100,350 20,260" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" fill="none" stroke-width="5" stroke="black" />
<text x="20" y="390"> polygon: end/start overlap </text>
<path d="M250,350 l 25,-25
a15,5 -16 0,1 10,-15 l 20,-5
a15,10 -16 0,1 10,-15 l 20,-5
a15,25 -16 0,1 10,-15 l 20,-5
a15,35 -16 0,1 10,-15 l 20,-5"
fill="none" stroke="green" stroke-width="2" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
<text x="250" y="390"> path with arc segments </text>
</svg>
