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, ... |
Get Designing SVG Web Graphics now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
