svg tspan

9.4 Text span element `tspan`

putting a part of text in tspan elemnt allows you to change its style and position.

Example 1.Changing style with <tspan style="...">

<svg width="300" height="30" xmlns="http://www.w3.org/2000/svg">
   <text x="10" y="20" style="font-size:12pt;">
      Switch among <tspan style="font-style:italic">italic</tspan>,
      normal, and <tspan style="font-weight:bold">bold</tspan>.
  </text>
</svg>

Example 2. Use of relative position with <tspan dx="..." dy="...">

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
   <text x="10" y="30" style="font-size:12pt; fill:blue;">
        F<tspan dy="4">A</tspan><tspan dy="8">L</tspan><tspan dy="12">L</tspan>
  </text>
  <text x="10" y="80" style="font-size:12pt; fill:green">
        F<tspan dx="10">a</tspan><tspan dx="30">r</tspan><tspan dx="50">away</tspan> and <tspan dy="-30">up</tspan>
  </text>
</svg>

Example 3. Use of multiple values for dx and dy in a text span

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
   <text x="30" y="30" style="font-size:14pt">
      <tspan dx="0 4 -3 30 -4 10" dy="0 -3 50 -20 -25 -8">Shaken</tspan>
  </text>
</svg>

Example 4. Use of absolute position with <tspan x="..." y="...">

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
   <text x="10" y="30" style="font-size:12pt;">
        They dined on mince, and slices of quince,
        <tspan x="20" y="50">Which they ate with a runcible spoon;</tspan>
        <tspan x="10" y="70">And hand in hand, on the edge of the sand,</tspan>
        <tspan x="20" y="90">They danced by the light of the moon.</tspan>
        <tspan x="395" y="160" style="text-anchor: end; font-style:italic">Nonsense poem “The Owl and the Pussy-cat” (1871).</tspan>
        <tspan x="395" y="185" style="text-anchor: end">by Edward Lear.</tspan>
  </text>
</svg>

Example 5. Use rotation with <tspan rotate="...">

<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
   <text x="10" y="30" style="font-size:20pt;">
        <tspan x="20" y="50" rotate="-40">I am rotated by -40 degrees</tspan>
  </text>
</svg>

Example 6. Using <tspan style="baseline-shif:sub;"> and <tspan style="baseline-shif:super;">

 <svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
   <text x="20" y="25" style="font-size: 12pt;">
        C<tspan style="baseline-shift: sub;">12</tspan>
        H<tspan style="baseline-shift: sub;">22</tspan>
        O<tspan style="baseline-shift: sub;">11</tspan> (sugar)
        </text>
        <text x="20" y="70" style="font-size: 12pt;">
        6.02 x 10<tspan baseline-shift="super">23</tspan>
        (Avogadro's number)
  </text>
</svg>

9.4 Text span element tspan

9.4 Text span element `tspan`