Displaying Text with Linear Gradients

---

Displaying Text with Opacity

Consider the text string rendered in Figure 8.9

Figure 8.9: Text strings with different opacity values.

The SVG document in Listing 8.9 demonstrates how to use the SVG text element with different opacity values when displaying text strings.

Listing 8.9 opacityText1.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%">  <g transform="translate(50,100)">   <text  x="0" y="0"          fill="red"          font-size="48">         Opacity 1   </text>   <text  x="0" y="100"          fill="red"          font-size="48"         opacity=".6">         Opacity .6   </text>   <text  x="0" y="200"          fill="red"          font-size="48"         opacity=".2">         Opacity .2   </text> </g> </svg>

Remarks

The SVG code in Listing 8.9 renders three horizontal text strings, all of which have a font size of 48 and a fill value of red. The three values of the opacity attribute are 1 (which is the default value), .6, and .2. The smaller the value of the opacity attribute, the fainter the rendered text string. Thus, the string with opacity .2 is fainter than the one with opacity .6, which in turn is fainter than the string with opacity 1. You can specify lower values for the opacity attribute in situations where you are overlaying multiple text strings with various SVG functions (e.g., rotate, skew, etc.) in conjunction with animation and you want to create specific artistic effects.

---