• Create BookmarkCreate Bookmark
• Create Note or TagCreate Note or Tag
• PrintPrint

## The skewX and skewY Transformations

SVG also has two other transformations: `skewX` and `skewY`, which let you skew one of the axes. The general form is `skewX(` `angle` `)` and `skewY(` `angle` `)` The `skewX` transformation “pushes” all x-coordinates by the specified angle, leaving y-coordinates unchanged. `skewY` skews the y-coordinates, leaving x-coordinates unchanged, as shown in Example 5-12.

Example 5-12. skewX and skewY
````[1]`
<g style="stroke: gray; stroke-dasharray: 4 4;">
<line x1="0" y1="0" x2="200" y2="0"/>
<line x1="20" y1="0" x2="20" y2="90"/>
<line x1="120" y1="0" x2="120" y2="90"/>
</g>

<g transform="translate(20, 0)">     `[2]`
<g transform="skewX(30)">     `[3]`
<polyline points="50 0, 0 0, 0 50"      `[4]`
style="fill: none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewX</text>     `[5]`
</g>
</g>

<g transform="translate(120, 0)">     `[6]`
<g transform="skewY(30)">
<polyline points="50 0, 0 0, 0 50"
style="fill: none; stroke: black; stroke-width: 2;"/>
<text x="0" y="60">skewY</text>
</g>
</g>```

PREVIEW

Not a subscriber?

Start A Free Trial

• Create BookmarkCreate Bookmark
• Create Note or TagCreate Note or Tag
• PrintPrint