figure02-18.svg

SVG资料。这是一个SVG资料

<svg width="800" height="600" viewBox="0 0 400 300">
  <defs>
    <pattern id="gridPattern" x="0" y="0" width="10" height="10"   
             patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="gray" 
            stroke-width="0.25"/>
    </pattern>
  </defs>
  <rect id="grid" width="350" height="211" stroke="gray" stroke-width="0.1" 
        fill="url(#gridPattern)" />

 <!-- grid -->
  <line x1="10" y1="30" x2="152" y2="30" stroke="darkslategray" 
        stroke-width="40" stroke-dasharray="2 18" 
        fill="none" />

  <line x1="10" y1="70" x2="150" y2="70" stroke="darkslategray" 
        stroke-width="20" stroke-opacity="0.5" 
        stroke-dasharray="20 20" fill="none" />

  <line x1="30" y1="110" x2="70" y2="110" stroke="darkslategray" 
        stroke-width="40" stroke-linecap="round" 
        fill="none" />

  <line x1="110" y1="110" x2="150" y2="110" stroke="darkslategray" 
        stroke-width="10" stroke-dasharray="0 20" 
        stroke-linecap="round" fill="none" />

  <line x1="130" y1="160" x2="130" y2="160" stroke="darkslategray" 
        stroke-width="40" stroke-opacity="0.5" 
        stroke-linecap="round" fill="none" />

  <line x1="10" y1="160" x2="100" y2="160" stroke="darkslategray" 
        stroke-width="40" 
        stroke-dasharray="1 1 1 1 1 2 2 2 2 1 1 1 4 1 1 2 2 2 1 1 1 1 1 1 1 1 2 
                          3 1 1 2 1 3 1 1 3 1 2 1 2 1 1" 
        fill="none" />

  <text x="75" y="200" font-size="8" text-anchor="middle">single lines</text>

  <line x1="180" y1="31" x2="322" y2="31" stroke="darkslategray" 
        stroke-width="42" stroke-dasharray="2 18" 
        fill="none" />
  <line x1="251" y1="10" x2="251" y2="52" stroke="darkslategray" 
        stroke-width="142" stroke-dasharray="2 18" 
        fill="none" />

  <line x1="180" y1="70" x2="320" y2="70" stroke="darkslategray" 
        stroke-width="20" stroke-opacity="0.5" 
        stroke-dasharray="20 20" fill="none" />
  <line x1="180" y1="70" x2="320" y2="70" stroke="silver" 
        stroke-width="20" stroke-opacity="0.5" 
        stroke-dasharray="20 20" stroke-dashoffset="20" fill="none" />

  <line x1="230" y1="130" x2="270" y2="130" stroke="darkslategray" 
        stroke-width="40" stroke-opacity="0.7" 
        stroke-linecap="round" fill="none" />
  <line x1="250" y1="110" x2="250" y2="150" stroke="darkslategray" 
        stroke-width="40" stroke-opacity="0.7" 
        stroke-linecap="round" fill="none" />

  <text x="250" y="200" font-size="8" text-anchor="middle">two lines  
        each</text>

</svg>