title: Understanding SVG <text> x-y coordinates and padding
body: <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>