svg skew

6.7 The skewX and skewY Transformations

SVG also has two other transformations: skewX and skewY, which let you skew one of the axes.

skewX(angle) transformation "pushes" all x-coordinates by the specified angle, leaving y-coordinates unchanged.
skewY(angle) skews the y-coordinates, leaving x-coordinates unchanged

Example 1

   <svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="50"
      style="fill:none; stroke:gray; stroke-width:2; stroke-dasharray:5 2"/>
  <g transform="skewX(10)" style="fill:none; stroke:#00aaaa; stroke-width:1;">
      <rect x="0" y="0" width="100" height="50"
      />
      <text x="5" y="50">skewX</text>
  </g>
  <g transform="skewY(20)" style="fill:none; stroke:#c00; stroke-width:1;">
      <rect x="0" y="0" width="100" height="50"
      />
      <text x="20" y="10">skewY</text>
  </g>
</svg>;

Example 2

transform="skewX(10)" results in vertical grid lines skewed by $10^{\circ}$

<svg width="200px" height="200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g transform="skewX(10)" style="fill:none; stroke:red; stroke-width:1;">
          <!-- horizontal grid -->
          <line x1="0" y1="10" x2="100" y2="10" stroke="gray"/>
          <line x1="0" y1="20" x2="100" y2="20" stroke="gray"/>
          <line x1="0" y1="30" x2="100" y2="30" stroke="gray"/>
          <line x1="0" y1="40" x2="100" y2="40" stroke="gray"/>
          <line x1="0" y1="50" x2="100" y2="50" stroke="gray"/>
          <line x1="0" y1="60" x2="100" y2="60" stroke="gray"/>
          <line x1="0" y1="70" x2="100" y2="70" stroke="gray"/>
          <line x1="0" y1="80" x2="100" y2="80" stroke="gray"/>
          <line x1="0" y1="90" x2="100" y2="90" stroke="gray"/>
          <!-- verticaal grid is skewed-->
          <line y1="0" x1="10" y2="100" x2="10" stroke="gray"/>
          <line y1="0" x1="20" y2="100" x2="20" stroke="gray"/>
          <line y1="0" x1="30" y2="100" x2="30" stroke="gray"/>
          <line y1="0" x1="40" y2="100" x2="40" stroke="gray"/>
          <line y1="0" x1="50" y2="100" x2="50" stroke="gray"/>
          <line y1="0" x1="60" y2="100" x2="60" stroke="gray"/>
          <line y1="0" x1="70" y2="100" x2="70" stroke="gray"/>
          <line y1="0" x1="80" y2="100" x2="80" stroke="gray"/>
          <line y1="0" x1="90" y2="100" x2="90" stroke="gray"/>
          <!-- shapes -->
          <rect x="10" y="10" width="40" height="40" />
          <circle cx="50" cy="50" r="20"/>
  </g>
</svg>

Example 3

transform="skewY(10)" results in horizontal grid lines skewed by $10^{\circ}$

<svg width="200px" height="200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g transform="skewY(10)" style="fill:none; stroke:red; stroke-width:1;">
          <!-- horizontal grid -->
          <line x1="0" y1="10" x2="100" y2="10" stroke="gray"/>
          <line x1="0" y1="20" x2="100" y2="20" stroke="gray"/>
          <line x1="0" y1="30" x2="100" y2="30" stroke="gray"/>
          <line x1="0" y1="40" x2="100" y2="40" stroke="gray"/>
          <line x1="0" y1="50" x2="100" y2="50" stroke="gray"/>
          <line x1="0" y1="60" x2="100" y2="60" stroke="gray"/>
          <line x1="0" y1="70" x2="100" y2="70" stroke="gray"/>
          <line x1="0" y1="80" x2="100" y2="80" stroke="gray"/>
          <line x1="0" y1="90" x2="100" y2="90" stroke="gray"/>
          <!-- verticaal grid is skewed-->
          <line y1="0" x1="10" y2="100" x2="10" stroke="gray"/>
          <line y1="0" x1="20" y2="100" x2="20" stroke="gray"/>
          <line y1="0" x1="30" y2="100" x2="30" stroke="gray"/>
          <line y1="0" x1="40" y2="100" x2="40" stroke="gray"/>
          <line y1="0" x1="50" y2="100" x2="50" stroke="gray"/>
          <line y1="0" x1="60" y2="100" x2="60" stroke="gray"/>
          <line y1="0" x1="70" y2="100" x2="70" stroke="gray"/>
          <line y1="0" x1="80" y2="100" x2="80" stroke="gray"/>
          <line y1="0" x1="90" y2="100" x2="90" stroke="gray"/>
          <!-- shapes -->
          <rect x="10" y="10" width="40" height="40" />
          <circle cx="50" cy="50" r="20"/>
  </g>
</svg>

Example 4

transform="skewX(10) skewXY(10)" results in vertical and horizontal grid lines skewed by $10^{\circ}$

<svg width="200px" height="200px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g transform="skewX(10) skewY(10)" style="fill:none; stroke:red; stroke-width:1;">
          <!-- horizontal grid -->
          <line x1="0" y1="10" x2="100" y2="10" stroke="gray"/>
          <line x1="0" y1="20" x2="100" y2="20" stroke="gray"/>
          <line x1="0" y1="30" x2="100" y2="30" stroke="gray"/>
          <line x1="0" y1="40" x2="100" y2="40" stroke="gray"/>
          <line x1="0" y1="50" x2="100" y2="50" stroke="gray"/>
          <line x1="0" y1="60" x2="100" y2="60" stroke="gray"/>
          <line x1="0" y1="70" x2="100" y2="70" stroke="gray"/>
          <line x1="0" y1="80" x2="100" y2="80" stroke="gray"/>
          <line x1="0" y1="90" x2="100" y2="90" stroke="gray"/>
          <!-- verticaal grid is skewed-->
          <line y1="0" x1="10" y2="100" x2="10" stroke="gray"/>
          <line y1="0" x1="20" y2="100" x2="20" stroke="gray"/>
          <line y1="0" x1="30" y2="100" x2="30" stroke="gray"/>
          <line y1="0" x1="40" y2="100" x2="40" stroke="gray"/>
          <line y1="0" x1="50" y2="100" x2="50" stroke="gray"/>
          <line y1="0" x1="60" y2="100" x2="60" stroke="gray"/>
          <line y1="0" x1="70" y2="100" x2="70" stroke="gray"/>
          <line y1="0" x1="80" y2="100" x2="80" stroke="gray"/>
          <line y1="0" x1="90" y2="100" x2="90" stroke="gray"/>
          <!-- shapes -->
          <rect x="10" y="10" width="40" height="40" />
          <circle cx="50" cy="50" r="20"/>
  </g>
</svg>