Understanding SVG <text> x-y coordinates and padding
<p>Fiddling with the following example:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg"
     width="1024px" height="1024px" viewBox="0 0 1024 1024" style="background-color: yellow"&gt;

    &lt;text x="0" y="29"
          font-family="'Lucida Grande', sans-serif"
          font-size="32"&gt;

        Regular ol' text here. Hi.

    &lt;/text&gt;

&lt;/svg&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>When I inspect <code>&lt;text&gt;</code> in Chrome, it shows the height as 35.7969px. I'm not sure if this number is based on screen resolution/density or not.</p>

<p>Two questions:</p>

<p>1) What do the x and y coordinates of <code>&lt;text&gt;</code> represent?</p>

<p>2) Is there a way to remove the padding inside <code>&lt;text&gt;</code> so the text fits the element completely?</p>