title: Placing text in the center of svg
body: <p>I am creating an <code>&lt;svg&gt;</code>, and I want to put text in the center of the <code>&lt;svg&gt;</code>,  when I click on the first button, the svg doesn't have text, when I click on the second button, the text show up. The first one I just add the position of svg.  but I don't know why the text does not show up?</p>
  
  <p>Thank you</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#testbtm').click(function() {
      var str = '&lt;svg class="hexagon" class="ui-widget-content" style="position:absolute; left:200; top:300;"\
              &lt;text fill="black" x=75 y=75 style="text-anchor: middle"&gt;1&lt;/text&gt;\
              &lt;path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue"&gt;&lt;/svg&gt;'
      var svgElement = $(str);
      svgElement.children('text').text(1);
      svgElement.attr("class", "hexagon ui-widget-content");
      $("#display").append(svgElement);
    }); //end click 
    $('#testbtm2').click(function() {
      $('.hexagon').each(function() {
        var svgElement = $('&lt;svg class="hexagon" class="ui-widget-content"&gt;\
              &lt;text fill="black" x=75 y=75 style="text-anchor: middle"&gt;1&lt;/text&gt;\
              &lt;path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z" / fill="none" stroke="blue"&gt;&lt;/svg&gt;');
        svgElement.children('text').text(1);
        svgElement.attr("class", "hexagon ui-widget-content");
        $("#display").append(svgElement);
      });
    }); // end click
  }); // end ready</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#display {
    height: 500 px;
    width: 500 px;
    border: 1 px solid black;
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="display"&gt;&lt;/div&gt;
  &lt;button id="testbtm"&gt;test&lt;/button&gt;
  &lt;button id="testbtm2"&gt;test2&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>