title: HTML5 SVG - Text Positioning
body: <p>I am trying to position a <code>&lt;text&gt;</code> element in HTML5 SVG by giving it a top margin. Let' say, I wanted the <code>&lt;text&gt;</code> element to have a top margin of 10px. This will not work:</p>
  
  <pre><code>&lt;svg style="height: 100px; border: 1px solid black"&gt;
      &lt;text fill="#000" x="10" y="10" font-size="50" font-family="Arial"&gt;
          &lt;tspan&gt;The quick brown fox jumps over the lazy dog&lt;/tspan&gt;
      &lt;/text&gt;    
  &lt;/svg&gt;
  </code></pre>
  
  <p>The problem is, that for SVG text elements, the <code>y</code> distance is measured from the bottom line of the text, not the top. This code produces text where only the lower 10px are visible. So, we have to add the <code>font-size</code> value to the <code>y</code> value to get the margin right:</p>
  
  <pre><code>&lt;svg style="height: 100px; border: 1px solid black"&gt;
      &lt;text fill="#000" x="10" y="60" font-size="50" font-family="Arial"&gt;
          &lt;tspan&gt;The quick brown fox jumps over the lazy dog&lt;/tspan&gt;
      &lt;/text&gt;    
  &lt;/svg&gt;
  </code></pre>
  
  <p>At least, that was what I thought. But this does not work either. Now, the top margin is too large, as you can see in the fiddle: <a href="http://jsfiddle.net/yy8gS/2/" rel="noreferrer">http://jsfiddle.net/yy8gS/2/</a>. I want the top margin to be the same as the left margin, which is clearly not the case. In fact, a <code>y</code> value of 48 looks about right but I have no idea why, or how I could calculate this value for arbitrary margins and font sizes. It seems to me that the <code>font-size</code> value is not the actual text height value used by SVG for positioning.</p>
  
  <p>Can anybody help me with this? Is what I am trying to do even possible with SVG?</p>
  
  <p>Thanks in advance!</p>