<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg">

  <rect x="20" y="20" width="300" height="250"
        style="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 style="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 style="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 style="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 style="fill:none; stroke:green; stroke-width:3;">
          <rect x="0" y="0" width="100" height="40" rx="10" ry="10"/>
        </g>
      </g>
    </g>


</svg>
