<link rel="match" href="reference/svg-stroke-styles.html" />
<style>
path {
  stroke-width: 20;
}
path:nth-of-type(1) {
  stroke-linecap: butt;
}
path:nth-of-type(2) {
  stroke-linecap: round;
}
path:nth-of-type(3) {
  stroke-linecap: square;
}
</style>
<svg width="600" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Horizontal lines. -->
  <path d="M20,20 h40" stroke="red"/>
  <path d="M20,50 h40" stroke="yellow" />
  <path d="M20,80 h40" stroke="blue" />

  <!-- Vertical lines. -->
  <path d="M20,250 v-40" stroke="red" stroke-linecap="butt" />
  <path d="M50,250 v-40" stroke="yellow" stroke-linecap="round" />
  <path d="M80,250 v-40" stroke="blue" stroke-linecap="square" />

  <!-- Degenerate lines. -->
  <path d="M95,20 h0" stroke="red" stroke-linecap="butt" />
  <path d="M95,50 h0" stroke="yellow" stroke-linecap="round" />
  <path d="M95,80 h0" stroke="blue" stroke-linecap="square" />

  <!-- Degenerate line ends, but actual path. -->
  <path d="M130,20 h0 l20,-10 h0" stroke="red" stroke-linecap="butt" />
  <path d="M130,50 h0 l20,-10 h0" stroke="yellow" stroke-linecap="round" />
  <path d="M130,80 h0 l20,-10 h0" stroke="blue" stroke-linecap="square" />

  <!-- Weird line ends. -->
  <path d="M190,21 l0,-1 l20,-10 l0,-1" stroke="red" stroke-linecap="butt" />
  <path d="M190,51 l0,-1 l20,-10 l0,-1" stroke="yellow" stroke-linecap="round" />
  <path d="M190,81 l0,-1 l20,-10 l0,-1" stroke="blue" stroke-linecap="square" />

  <!-- Half-open lines. -->
  <path d="M240,20 h20 h-20" stroke="red" stroke-linecap="butt"
        stroke-linejoin="round" />
  <path d="M240,50 h20 h-20" stroke="yellow"  stroke-linecap="round"
        stroke-linejoin="round" />
  <path d="M240,80 h20 h-20" stroke="blue"  stroke-linecap="square"
        stroke-linejoin="round" />

  <!-- Closed lines. -->
  <path d="M290,20 h20 z" stroke="red" stroke-linecap="butt"
        stroke-linejoin="miter" />
  <path d="M290,50 h20 z" stroke="yellow"  stroke-linecap="round"
        stroke-linejoin="round" />
  <path d="M290,80 h20 z" stroke="blue"  stroke-linecap="square"
        stroke-linejoin="bevel" />

  <!-- Open triangle, facing down. -->
  <path d="M200,130 h60 L230,170 L200,130" stroke="red"
        stroke-linecap="butt" fill="none" />

  <!-- Open triangle, facing down, opposite winding order. Bevel linejoins. -->
  <path d="M240,210 L270,250 L300,210 h-60" stroke="red"
        stroke-linecap="butt" fill="none" stroke-linejoin="bevel" />

  <!-- Closed triangle, facing up. (Closed twice, in fact.) -->
  <path d="M280,170 h60 L310,130 L280,170 Z Z" stroke="red"
        stroke-linecap="butt" fill="none" />

  <!-- Very short and wide line. -->
  <path d="M370,150 h2" stroke="red"
        stroke-linecap="butt" style="stroke-width: 200" fill="none" />

  <!-- Very short and wide line with very thin caps -->
  <path d="M375,150 h0.01 h1.98 h0.01" stroke="blue"
        stroke-linecap="butt" style="stroke-width: 200" fill="none" />

  <!-- Closed rect (using <rect>) -->
  <rect x="20" y="120" width="50" height="50" stroke="green" fill="none"
        stroke-linecap="butt" stroke-linejoin="round" stroke-width="20" />

  <!-- Open rect. -->
  <path d="M110,170 h50 v-50 h-50 v50" stroke="green" fill="none"
        stroke-linecap="butt" stroke-linejoin="round" />

  <!-- Small closed rects with line width becoming wider than rect size. -->
  <rect x="100" y="200" width="20" height="20" stroke="green"
        stroke-linejoin="round" stroke-width="8" fill="none" />
  <rect x="130" y="200" width="15" height="15" stroke="green"
        stroke-linejoin="round" stroke-width="8" fill="none" />
  <rect x="155" y="200" width="10" height="10" stroke="green"
        stroke-linejoin="round" stroke-width="8" fill="none" />
  <!-- FIXME: Figure out why this is missing the center pixel on mac/arm64
  <rect x="175" y="200" width="5" height="5" stroke="green"
        stroke-linejoin="round" stroke-width="8" fill="none" /> -->


  <!-- Lines with sharp angles, miter linejoins, and differing miter limits. -->
  <path d="M300,290 l 5,-55 l5,55" stroke="blue" stroke-linecap="butt"
        stroke-linejoin="miter" fill="none" style="stroke-width: 4" />
  <path d="M320,290 l 5,-55 l5,55" stroke="blue" stroke-linecap="butt"
        stroke-linejoin="miter" fill="none" stroke-miterlimit="20"
        style="stroke-width: 4; stroke-miterlimit: -5" />


  <!-- PDF 1.7 spec, TABLE 4.6 Examples of line dash patterns. -->
  <g fill="none" stroke-linecap="butt" stroke="red" transform="translate(100, 240) scale(3)">
      <path d="M0,0 h13"  style="stroke-width: 1; stroke-linecap: butt" stroke-dashoffset="0" stroke-dasharray="none" />
      <path d="M0,3 h13"  style="stroke-width: 1; stroke-linecap: butt" stroke-dashoffset="0" stroke-dasharray="3" />
      <path d="M0,6 h13"  style="stroke-width: 1; stroke-linecap: butt" stroke-dashoffset="1" stroke-dasharray="2" />
      <path d="M0,9 h13"  style="stroke-width: 1; stroke-linecap: butt" stroke-dashoffset="0" stroke-dasharray="2 1" />
      <path d="M0,12 h13" style="stroke-width: 1; stroke-linecap: butt" stroke-dashoffset="6" stroke-dasharray="3 5" />
      <path d="M0,15 h13" style="stroke-width: 1; stroke-linecap: butt" stroke-dashoffset="11" stroke-dasharray="2 3" />
  </g>

  <!-- Dashed rect with 0 dash length. -->
  <rect x="155" y="225" width="30" height="30" fill="none" stroke="green"
        style="stroke-linecap: round" stroke-dashoffset="0" stroke-dasharray="0 10" stroke-width="4" />

  <!-- Dashed rects with different cap styles. The last one also has a no-op negative scale factor. -->
  <rect x="195" y="225" width="30" height="30" fill="none" stroke="green"
        style="stroke-linecap: butt" stroke-dashoffset="1" stroke-dasharray="2 2" stroke-width="1" />
  <rect x="155" y="265" width="30" height="30" fill="none" stroke="green"
        style="stroke-linecap: round" stroke-dashoffset="1" stroke-dasharray="2 2" stroke-width="1" />
  <g transform="scale(-1)">
      <rect x="-225" y="-295" width="30" height="30" fill="none" stroke="green"
            style="stroke-linecap: square" stroke-dashoffset="1" stroke-dasharray="2 2" stroke-width="1" />
  </g>

  <!-- Triangle with missing side -->
  <path d="M230,285 L250,270 L260,295" stroke="blue" fill="green"
        style="stroke-width: 4" />

  <!-- A single path with multiple segments (closed, open, closed): -->
  <path d="M10,270 L20,290 L30,270 z
           M30,295 L40,275 L50,295
           M50,270 L60,290 L70,270 z"
        stroke="blue" fill="none" stroke-linejoin="round"
        style="stroke-width: 8"  />

  <!-- A path where a 'close' is followed by a no-op move. -->
  <path d="M175,185 L195,155 L215,185 L175,185 z
           M175,185 L199,170"
        stroke="blue" fill="none" stroke-linejoin="round"
        style="stroke-width: 4"  />

</svg>