Using the SVG tspan Element with Text Strings : text « SVG « XML






  1. XML
  2. SVG
  3. text

Using the SVG tspan Element with Text Strings

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="100%" height="100%" 
     xmlns="http://www.w3.org/2000/svg">

  <g transform="translate(10,10)"> 
    <text x="0" y="50" fill="red" font-size="36">
      One simple line of 
        <tspan font-weight="bold"
               fill="blue">simple</tspan>
      text
    </text>

    <text x="0" y="200" fill="red" font-size="36">
      Another simple line of 
        <tspan dx="0" dy="-50" 
               font-weight="bold" 
               fill="green">
          simple
        </tspan>
        <tspan dy="100">
           text
        </tspan>
    </text>
  </g>
</svg>








Related examples in the same category

1.Rendering a Text String
2.Rendering a Text String with Colored Borders
3.Using Text Decoration with Text Strings
4.Rendering Shadowed Text
5.Rotating a Text String Counterclockwise
6.Displaying Text with Linear Gradients
7.Displaying Text with Opacity
8.Displaying Text with blur Filters
9.Text Following a Specified Path
10.Vertical text