<svg width="500" height="500"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:html="http://www.w3.org/1999/xhtml">
    <!--
    Test all the 'overflow' property values except 'inherit' on the 'marker' element.

    Each column tests a value of the 'overflow' property.
    The first row uses the 'marker' property to set the same marker on start-, mid- and end-points on the path.
    The second row uses 'marker-start', 'marker-mid' and 'marker-end' to give each point its own marker.
    The third row uses the 'marker' property like the first row, but here the marker has orient="auto" set.
    -->
    <html:link rel="help" href="https://www.w3.org/TR/2016/CR-SVG2-20160915/painting.html#Markers"/>
    <html:link rel="match" href="marker-005-ref.svg"/>
    <html:meta name="assert" content="Test all the 'overflow' property values except 'inherit' on the 'marker' element."/>
    <defs>
      <marker id="marker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="marker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>
      <marker id="markerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="markerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth">
        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
      </marker>
      <marker id="markerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>

      <marker id="vmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="vmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="visible">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>
      <marker id="vmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="visible">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="vmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="visible">
        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
      </marker>
      <marker id="vmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="visible">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>

      <marker id="amarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="auto">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="amarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="auto">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>
      <marker id="amarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="auto">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="amarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="auto">
        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
      </marker>
      <marker id="amarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="auto">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>

      <marker id="smarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="scroll">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="smarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="scroll">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>
      <marker id="smarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="scroll">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="smarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="scroll">
        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
      </marker>
      <marker id="smarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="scroll">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>

      <marker id="hmarker1" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="hidden">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="hmarker2" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" orient="auto" overflow="hidden">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>
      <marker id="hmarkerStart" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="7.5" refY="7.5" markerUnits="strokeWidth" overflow="hidden">
        <rect width="15" height="15" fill="purple" stroke="none"/>
      </marker>
      <marker id="hmarkerMiddle" viewBox="0 0 8 8" markerWidth="2" markerHeight="2" refX="4" refY="4" markerUnits="strokeWidth" overflow="hidden">
        <circle cx="4" cy="4" r="8" fill="green" stroke="none"/>
      </marker>
      <marker id="hmarkerEnd" viewBox="0 0 10 10" markerWidth="2" markerHeight="2" refX="10" refY="10" markerUnits="strokeWidth" overflow="hidden">
        <path d="M 10 0 L 20 20 L 0 20 Z" fill="blue" stroke="none"/>
      </marker>
    </defs>

    <style type="text/css">
      .testpaths {
          fill:none;
          stroke:black;
          stroke-width:8px;
      }

      /* no overflow specified */
      #p1  { marker: url(#marker1); }
      #p2  {
          marker-start: url(#markerStart);
          marker-mid:url(#markerMiddle);
          marker-end: url(#markerEnd);
      }
      #p3  { marker: url(#marker2); }

      /* overflow = visible */
      #p4  { marker: url(#vmarker1); }
      #p5  {
          marker-start: url(#vmarkerStart);
          marker-mid:url(#vmarkerMiddle);
          marker-end: url(#vmarkerEnd);
      }
      #p6  { marker: url(#vmarker2); }

      /* overflow = auto */
      #p7  { marker: url(#amarker1); }
      #p8  {
          marker-start: url(#amarkerStart);
          marker-mid:url(#amarkerMiddle);
          marker-end: url(#amarkerEnd);
      }
      #p9  { marker: url(#amarker2); }

      /* overflow = scroll */
      #p10  { marker: url(#smarker1); }
      #p11  {
          marker-start: url(#smarkerStart);
          marker-mid:url(#smarkerMiddle);
          marker-end: url(#smarkerEnd);
      }
      #p12  { marker: url(#smarker2); }

      /* overflow = hidden */
      #p13  { marker: url(#hmarker1); }
      #p14  {
          marker-start: url(#hmarkerStart);
          marker-mid:url(#hmarkerMiddle);
          marker-end: url(#hmarkerEnd);
      }
      #p15  { marker: url(#hmarker2); }
    </style>

    <text x="50%" y="3em" style="font: 18px; text-anchor:middle;">Test marker overflow</text>

    <g style="font: 14px; text-anchor:middle" transform="translate(0,280)">
      <text x="60">default</text>
      <text x="155">'visible'</text>
      <text x="245">'auto'</text>
      <text x="340">'scroll'</text>
      <text x="430">'hidden'</text>
    </g>

    <g transform="translate(-30,75)">
      <g id="subtest1" transform="scale(0.6)">
        <path id="p1" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
        <path id="p2" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
        <path id="p3" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
      </g>

      <g id="subtest2" transform="scale(0.6) translate(150,0)">
        <path id="p4" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
        <path id="p5" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
        <path id="p6" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
      </g>

      <g id="subtest3" transform="scale(0.6) translate(300,0)">
        <path id="p7" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
        <path id="p8" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
        <path id="p9" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
      </g>

      <g id="subtest4" transform="scale(0.6) translate(450,0)">
        <path id="p10" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
        <path id="p11" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
        <path id="p12" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
      </g>

      <g id="subtest5" transform="scale(0.6) translate(600,0)">
        <path id="p13" class="testpaths" d="M 130 40 L 180 40 L 180 90"/>
        <path id="p14" class="testpaths" d="M 130 135 L 180 135 L 180 185"/>
        <path id="p15" class="testpaths" d="M 130 230 L 180 230 L 180 280"/>
      </g>
    </g>
</svg>