SVG Multiple Rectangles

by acjackson911

HTML

<svg width="260" height="140">
  <defs>
    <!-- Original symbol, not shown -->
    <symbol id="s-rect">
      <rect width="100" height="25" x="2" y="2"/>
     </symbol>
  </defs>

  <!-- Simple copy, the background is black by default -->
  <use xlink:href="#s-rect" x="20" y="20"/>
  <!-- Adding width and fill -->
  <use xlink:href="#s-rect" x="140" y="20"
       width="50" fill="yellowgreen"/>
  <!-- Adding fill and stroke -->
  <use xlink:href="#s-rect" x="20" y="80"
       fill="gold" stroke="orange" stroke-width="4"/>
  <!-- Adding fill, stroke and transform -->
  <use xlink:href="#s-rect" x="140" y="80"
       fill="skyblue" stroke="steelblue" stroke-width="2"
       transform="rotate(-25 190 92)"/>
</svg>