<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <rect x="20" y="20" width="300" height="250"
        fill="none" stroke="blue" stroke-width="2"/>

  <!-- Establish a new coordinate system whose origin is at (30,30)
       in the initial coord. system and which is skewed in X by 30 degrees. -->
  <g transform="translate(50,50)">
    <g transform="skewX(30)">
      <g fill="none" stroke="red" stroke-width="3">
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
    </g>
  </g>

  <!-- Establish a new coordinate system whose origin is at (200,30)
       in the initial coord. system and which is skewed in Y by 30 degrees. -->
  <g transform="translate(200,50)">
    <g transform="skewY(30)">
      <g fill="none" stroke="blue" stroke-width="2">
        <line x1="0" y1="0" x2="50" y2="0" />
        <line x1="0" y1="0" x2="0" y2="50" />
      </g>
    </g>
  </g>

    <g transform="translate(50,140)">
      <g transform="skewX(30)">
        <g fill="none" stroke="purple" stroke-width="4">
          <rect x="0" y="0" width="60" height="40" />
        </g>
      </g>
    </g>

    <!-- Establish a new coordinate system whose origin is at (200,30)
         in the initial coord. system and which is skewed in Y by 30 degrees. -->
    <g transform="translate(200,140)">
      <g transform="skewY(30)">
        <g fill="none" stroke="green" stroke-width="3">
          <rect x="0" y="0" width="100" height="40" rx="10" ry="10"/>
        </g>
      </g>
    </g>


</svg>
