Quote:
Originally Posted by politicorific
Now I have a tough question, how would I mix and match different text styles in that svg code - for example, have some text underlined, italicized, or bolded?
|
Basically the same way as in XHTML, CSS properties text-decoration, font-style and font-weight would do the trick. tspan element can be used the same way as span is used in XHTML (SVG does not have things like b or u tags, but you can use class attribute and a stylesheet). Here is another example for you, but now it only works in DE and Opera:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<p>Here is inline SVG:</p>
<svg xmlns="http://www.w3.org/2000/svg" width="10em" height="10em" viewBox="0 0 100 100">
<g xml:space="preserve" font-size="10" font-family="monospace">
<rect x="0" y="0" width="100" height="100" fill="none" stroke="blue"/>
<text x="30" y="20"> XXX </text>
<text x="30" y="30">X X</text>
<text x="30" y="40" style="font-style:italic">X X</text>
<text x="30" y="50">X X</text>
<text x="30" y="60" style="text-decoration:underline"> XXXX</text>
<text x="30" y="70"> X</text>
<text x="30" y="80"> X</text>
<text x="30" y="90"> X<tspan style="font-weight:bold">XX</tspan> </text>
</g>
</svg>
<p>A paragraph after SVG</p>
</body>
</html>
Also, notice viewBox attribute and with/heights in em units. This makes SVG scale automatically when default font size changes (may or may not be something that you want).
Peter