Combining Multiple SVG Functions

---

Cylinders and the SVG scale Function

Consider the two horizontal cylinders rendered in Figure 6.8.

Figure 6.8: DRAWING SCALED CYLINDERS WITH THE SVG SCALE FUNCTION.

The SVG document hScaledSlantedGradientCylinderDotPattern3.svg in Listing 6.8 demonstrates how to use the SVG scale function in order to render a cylinder and a scaled cylinder.

Listing 6.8 hScaledSlantedGradientCylinderDotPattern3.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="200" y2="0"      gradientUnits="userSpaceOnUse">      <stop offset="0%"   style="stop-color:#FF0000"/>      <stop offset="100%" style="stop-color:#440000"/>   </linearGradient>   <pattern             width="8" height="8"            patternUnits="userSpaceOnUse">      <circle          cx="2" cy="2" r="2"         style="fill:red;"/>   </pattern> </defs> <g transform="translate(100,100)">    <ellipse cx="0"  cy="50"             rx="20" ry="50"             stroke="blue" stroke-width="4"             style="fill:url(#gradientDefinition1)"/>    <rect x="0" y="0" width="300" height="100"          style="fill:url(#gradientDefinition1)"/>    <rect x="0" y="0" width="300" height="100"          style="fill:url(#dotPattern)"/>    <ellipse cx="300" cy="50"             rx="20"  ry="50"             stroke="blue" stroke-width="4"             style="fill:yellow;"/> </g> <g transform="translate(100,100) scale(.5)">    <ellipse cx="0"  cy="50"             rx="20" ry="50"             stroke="blue" stroke-width="4"             style="fill:url(#gradientDefinition1)"/>    <rect x="0" y="0" width="300" height="100"          style="fill:url(#gradientDefinition1)"/>    <rect x="0" y="0" width="300" height="100"          style="fill:url(#dotPattern)"/>    <ellipse cx="300" cy="50"             rx="20"  ry="50"             stroke="blue" stroke-width="4"             style="fill:yellow;"/> </g> </svg>

Remarks

The SVG code in Listing 6.8 consists of two SVG g elements, each of which renders a cylinder with gradient shading. The first SVG g element renders a cylinder by rendering the left-most ellipse, a rectangle, and then the right-most ellipse. Notice how the rectangle is actually rendered twice with different values for the fill attribute. The first rectangle is rendered with a fill attribute that references a linear gradient in the SVG defs element; the second rectangle is rendered on top of the first rectangle using a fill attribute that references an SVG pattern element. This creates the effect of a polka dot pattern rendered with a linear gradient. The second SVG g element uses the SVG scale function in order to render another cylinder that is a scaled version of the first cylinder. The SVG scale function makes it very easy to generate any number of scaled versions of an existing graphics image!

---