Cylinders and the SVG scale Function

---

Hourglasses with the SVG scale and skew Functions

Consider the two hourglass figures rendered in Figure 6.9.

Figure 6.9: Drawing scaled skewed hourglass figures.

The SVG document in Listing 6.9 demonstrates how to use the SVG scale and skew functions in order to render skewed hourglass figures.

Listing 6.9 vScaledSkewedSlantedGradientHourGlass1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg width="100%" height="100%"> <defs>   <linearGradient       x1="0" y1="0" x2="100" y2="100"      gradientUnits="userSpaceOnUse">      <stop offset="0%"   style="stop-color:#FF0000"/>      <stop offset="100%" style="stop-color:#000000"/>   </linearGradient>   <linearGradient       x1="0" y1="0" x2="300" y2="300"      gradientUnits="userSpaceOnUse">      <stop offset="0%"   style="stop-color:#FF0000"/>      <stop offset="100%" style="stop-color:#000000"/>   </linearGradient> </defs> <g transform="translate(150,20) skewX(30)">    <ellipse cx="0"  cy="50"             rx="100" ry="20"             style="fill:url(#gradientDefinition1)"/>    <polygon points="-100,50 100,50 0,200"          style="fill:url(#gradientDefinition1)"/>    <ellipse cx="0"  cy="50"             rx="100" ry="20"           style="fill:none;stroke:blue;stroke-width:2;"/>    <polygon points="-100,350 100,350 0,200"          style="fill:url(#gradientDefinition2)"/>    <ellipse cx="0"  cy="350"             rx="100" ry="20"             style="fill:url(#gradientDefinition2)"/>    <ellipse cx="0"  cy="350"             rx="100" ry="20"           style="fill:none;stroke:blue;stroke-width:2;"/> </g> <g transform="translate(150,20) skewX(30) scale(.5)">    <ellipse cx="0"  cy="50"             rx="100" ry="20"             style="fill:url(#gradientDefinition1)"/>    <polygon points="-100,50 100,50 0,200"          style="fill:url(#gradientDefinition1)"/>    <ellipse cx="0"  cy="50"             rx="100" ry="20"           style="fill:none;stroke:blue;stroke-width:2;"/>    <polygon points="-100,350 100,350 0,200"          style="fill:url(#gradientDefinition2)"/>    <ellipse cx="0"  cy="350"             rx="100" ry="20"             style="fill:url(#gradientDefinition2)"/>    <ellipse cx="0"  cy="350"             rx="100" ry="20"           style="fill:none;stroke:blue;stroke-width:2;"/> </g> </svg>

Remarks

The SVG code in Listing 6.9 consists of two SVG g elements, each of which renders an hourglass figure with gradient shading. The first SVG g element renders a cone by rendering the top ellipse and a triangle with linear gradient shading, and then another ellipse that creates the blue circumference. This combination of components is 'reflected' in order to create the lower half of the hourglass figure. The second SVG g element uses the SVG scale and skew functions in order to render a scaled and skewed hourglass figure that is derived from the first hourglass figure,

---