Entire Site
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint
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)
|
Code View:
Scroll
/
Show All
<?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>
|
- Create BookmarkCreate Bookmark
- Create Note or TagCreate Note or Tag
- PrintPrint