O'Reilly logo

Designing SVG Web Graphics by Andrew H. Watt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required