Entire Site
Free Trial
Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- DownloadDownload
- PrintPrint
Chapter 5. Transforming the Coordinate S... > The skewX and skewY Transformations
5.7. 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> |
