title: How to make svg text like inline-block
body: <p>Trying to create chart legend.</p>
  
  <pre><code>&lt;svg&gt;
      &lt;g class="legend"&gt;
          &lt;g&gt;
              &lt;rect fill="blue" width="1em" height="1em" /&gt;
              &lt;text&gt;Bosnia and Herzegovina&lt;/text&gt;
          &lt;/g&gt;
          &lt;g&gt;
              &lt;rect fill="red" width="1em" height="1em" /&gt;
              &lt;text&gt;Democratic Republic of the Congo&lt;/text&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Obviously, each item starts at (0, 0) on top of previous one. Is there a way to make them behave more like inline-block elements? </p>
  
  <p><a href="http://jsfiddle.net/nngptbtn/4/" rel="nofollow">jsfiddle</a></p>