<svg width="500" height="300"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:html="http://www.w3.org/1999/xhtml">
    <!--
    Test 'Marker-start', 'marker-mid', and 'marker-end' apply markers at the
    appropriate vertices when applied to 'line', 'path', 'polygon' and 'polyline'
    elements.
    Note: 'marker-mid' has no effect on the 'line' element.
    -->
    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
    <html:link rel="match" href="marker-008-ref.svg"/>
    <html:meta name="assert" content="Tests marker-* render at the appropriate vertices."/>
    <style type="text/css">
        .start
        {
            marker-start: url(#markerTest);
        }
        .end
        {
            marker-end: url(#markerTest);
        }
        .mid
        {
            marker-mid: url(#markerTest);
        }
    </style>
    <defs>
        <marker id="markerTest" markerWidth="10" markerHeight="10" fill="blue">
            <rect width="50" height="55" />
        </marker>
    </defs>
    <line class="start" x1="10" y1="50" x2="100" y2="50" stroke="black" />
    <path class="start" d="M 10 100 L 50 100 L 100 100" stroke="black"/>
    <polygon class="start" points="10,150 50,150 100,150" stroke="black"/>
    <polyline class="start" points="10,200 50,200 100,200" stroke="black"/>

    <line class="end" x1="150" y1="50" x2="250" y2="50" stroke="black"/>
    <path class="end" d="M 150 100 L 200 100 L 250 100" stroke="black"/>
    <polygon class="end" points="250,150 200,150" stroke="black"/>
    <polyline class="end" points="150,200 200,200 250,200" stroke="black"/>

    <line class="mid" x1="300" y1="50" x2="400" y2="50" stroke="black"/>
    <path class="mid" d="M 300 100 L 350 100 L 400 100" stroke="black"/>
    <polygon class="mid" points="300,150 350,150" stroke="black"/>
    <polyline class="mid" points="300,200 350,200 400,200" stroke="black"/>
</svg>