Text : fitting elements

Inside a <text> element, the position of the text, the content of the text or the font of the text can be adjusted by the <tspan> element :
<tspan x="coord+" y="coord+" dx="coord+" dy="coord+" rotate="auto|number" />

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="10cm" height="3cm">
<desc>Example tspan01 - using tspan to change visual attributes</desc>

<g style="font-family:Verdana; font-size:12pt">
    <text x="2cm" y="1.5cm" style="fill:blue">
      You are
        <tspan style="font-weight:bold; fill:red">not</tspan>
      a banana.
    </text>
</g>
</svg>

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG December 1999//EN"
"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="10cm" height="3cm">
<desc>Example tspan02 - using tspan's dx and dy attributes
for incremental positioning adjustments</desc>

<g style="font-family:Verdana; font-size:12pt">
    <text x="2cm" y="1.5cm" style="fill:blue">
      But you
        <tspan dx="2em" dy="-.5cm" style="font-weight:bold; fill:red">
          are
        </tspan>
        <tspan dy="1cm">
           a peach!
        </tspan>
    </text>
</g>
</svg>

Didier Courtaud
The SVG language
Novembre 2001

44 / 74