Rendering HTML5 Illustration - Rendering HTML5 Illustration - page 20

• Font-family—thenameofthefont
• Font-size—thesizeofthefont
• Kerning—thespacebetweenletters
• Stroke—theoutsidecolorofafont
• Fill—theinsidecolorofafont
Following is an example SVG code showing text formatting.
<svg xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”>
<text x=”100” y=”40”
style=”font-family: Arial;
font-size : 24pt;
stroke : red;
fill : yellow;
kerning : 3; ”
>It was the best of times</text>
</svg>
Figure 3.25 shows the results of the code.
Figure 3.25 Formatted SVG text.
Text is treated as simply another image type in SVG. This allows
you to add some additional visual effects. As an example, you can
use a gradient as the FILL style for your text. The following SVG
code exaggerates the size of the text to show a gradient fill (see
Figure 3.26).
<svg xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”>
<radialGradient id=”yellow_red” cx=”50%” cy=”50%”
r=”50%” fx=”50%” fy=”50%”>
<stop offset=”0%” style=”stop-color:yellow;stop-
opacity:1”/>
<stop offset=”25%” style=”stop-color:red;stop-
opacity:1”/>
<stop offset=”50%” style=”stop-color:blue;stop-
opacity:1”/>
<stop offset=”100%” style=”stop-color:black;stop-
opacity:1”/>
</radialGradient>
Figure 3.26 Both linear and radial gradients can be used to style text.