Chapter 8: Displaying Text

   



Rendering a Text String

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

start example
<?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>
end example

Remarks

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.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net