• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

5. Transforming the Coordinate System > The skewX and skewY Transformations

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


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