|
|
Consider the string of text rendered in Figure 8.1.
Figure 8.1: A string of text.
The SVG document in Listing 8.1 demonstrates how to use the SVG text element in order to render a simple line of text.
Listing 8.1 simpleText1.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(100,100)"> <text x="0" y="0" fill="red" font-size="18"> Sample Text </text> </g> </svg>
The SVG code in Listing 8.1 renders the text string Sample Text with a fill value of red and a font size of 18. The lower-left starting point for the string of text is (100,100) because the SVG g element translates the origin to the point (100,100). The text string is rendered above the point (100,100) in the sense that the bottom horizontal edge of the text string 'rests' on the horizontal line that passes through the point (100,100). Note that this differs from an SVG rect element where the values of the x and y attributes specify the coordinates of a point that represents the upper-left corner of the rendered rectangle.
|
|