• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 4. Using Text in SVG > The <tspan> Element

The <tspan> Element

The <tspan> element doesn’t help you get around the need to calculate where line breaks should be, but it does help you with the copying of text by the user and the accessibility issues I mentioned earlier. This element also allows you to place text on the page by using a relative positioning mechanism rather than an absolute position, as is used with <text> elements. To see how this is done, take another look at Psalm 23, this time using both <text> and <tspan> elements.

Listing 4.12. (Psalm23tspan.svg)

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
      "http://www.w3.org/TR/2001/PR-SVG-20010719/ 
       DTD/svg10.dtd"> 
<svg width="500" height="400"> 
<text x="20" y="30" style="font-size:24; 
font-family:Arial, sans-serif; fill:red; stroke:red;"> 
Psalm 23 
</text> 
<text> 
<tspan x="20" y="60" style="font-size:16; 
font-family:'Times Roman', serif; fill:red; 
stroke:red;"> 
The Lord's my Shepherd 
</tspan> 
<tspan x="20" dy="1em" style="font-size:16; 
font-family: 'Times Roman', serif; fill:red; 
stroke:red;"> 
I'll not want 
</tspan> 
<tspan x="20" dy="1em" style="font-size:16; 
font-family: 'Times Roman', serif; fill:red; 
stroke:red;"> 
He makes me down to lie 
</tspan> 
<tspan x="20" dy="1em" style="font-size:16; 
font-family: 'Times Roman', serif; fill:red; 
stroke:red;"> 
In pastures green He leadeth me 
</tspan> 
<tspan x="20" dy="1em" style="font-size:16; 
font-family: 'Times Roman', serif; fill:red; 
stroke:red;"> 
The quiet waters by 
</tspan> 
</text> 
</svg> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint