title: Align lines of text to center in SVG
body: <p>I need to output multiple lines of text in SVG.
  For that I'm using the following scheme:</p>
  
  <pre><code>&lt;text&gt;
    &lt;tspan&gt; First line &lt;/tspan&gt;
    &lt;tspan&gt; Second line &lt;/tspan&gt;
  &lt;/text&gt;
  </code></pre>
  
  <p>First and second line of the text can have different number of characters, which can change dynamically.
  I want the second line to appear under the first line and text in both of them to be centered.</p>
  
  <p>I can make second line appear below the first line by adding <code>dy="15"</code> for the second <code>&lt;tspan&gt;</code>.</p>
  
  <p>I can align the text in each individual <code>&lt;tspan&gt;</code> by adding <code>text-anchor="middle"</code> to it.</p>
  
  <p>But how to do relative centric alignment of those <code>&lt;tspan&gt;</code>'s?</p>
  
  <p>I tried to use <code>x="0"</code> for each <code>&lt;tspan&gt;</code> but apparently it doesn't work since each <code>&lt;tspan&gt;</code> has different width and the rendered text in the shorter line is shifted to the left.</p>
  
  <p>Is there a way to align centres of 2 <code>&lt;tspan&gt;</code>'s of different width using only CSS and/or SVG.</p>