Rotating a Text String Counterclockwise

---

Displaying Text with Linear Gradients

Consider the text string rendered in Figure 8.8.

Figure 8.8: A text string with a linear gradient.

The SVG document in Listing 8.8 demonstrates how to use the SVG elements text and linearGradient in order to render a text string with a linear color gradient.

Listing 8.8 linearGradientText1.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="300" y2="0"       gradientUnits="userSpaceOnUse">      <stop offset="0%"   style="stop-color:#FFFF00"/>      <stop offset="100%" style="stop-color:#000000"/>   </linearGradient>  </defs> <g transform="translate(50,150)">   <text  x="0" y="0"          fill="url(#gradientDefinition)"          font-size="96">         Gradient Text   </text> </g> </svg>

Remarks

The SVG code in Listing 8.8 renders the text string Gradient Text with a font-size of 96 and a fill attribute that refers to an element whose id value is gradientDefinition and which is defined as a linear gradient in the SVG defs element. The linear gradient has a start color of yellow and a stop color of black. The dimensions of the enclosing rectangle for the linear gradient are specified by the following fragment:

x1="0" y1="0" x2="300" y2="0" 

On the other hand, if you specify something like,

x1="0" y1="0" x2="100" y2="500" 

you'll see a text string where most of the linear gradient is concentrated on the first two letters of the rendered text string. Experiment with different values for the attributes in order to achieve the effect that you want.

---