skew a polygon horizontally by 45 degrees:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewX(45)" />
</svg>
The result is equivalent to
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 60,30 30,30" />
</svg>
x values are computed as x + y * tan(angle)
, y values remain unchanged
skew a polygon vertically by 30 degrees:
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,0 30,30 0,30" transform="skewY(30)" />
</svg>
The result is equivalent to (allowing for rounding)
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 30,17.32 30,47.32 0,30" />
</svg>
x values remain unchanged, y values are computed as y + x * tan(angle)