title: Dynamically and Accurately Replace HTML span with SVG text with correct positioning
body: <p>I would like to replace a regular HTML span with the same text but in SVG format.</p>
  <p>I have seen examples of this, but it seems like the positioning is just manually entered in the examples, i.e. x=10 and y=10, but I am not sure what the reasoning is.</p>
  <p>With a span I can vertically center and horizontally center the text, but with SVG it seems I have to specifically tell it where to put the text within the parent element and the default without setting x or y puts the text out of the frame.</p>
  <p>That isn't necessarily a bad thing, but I can't figure out how to correctly position it.  Especially since the default positioning seems to put the text above and out of the view of the parent SVG.</p>
  <p>I even added text anchor and dominant baseline properties per this post:</p>
  <p><a href="https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle">How to place and center text in an SVG rectangle</a></p>
  <p>But that doesn't seem to do anything.</p>
  <p>Here is what I have so far.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var spantext = jQuery('.mytext').html();
  var width = jQuery('.mytext').width();
  var height = jQuery('.mytext').height();
  var fontsize = jQuery('.mytext').css('font-size');
  var color = jQuery('.mytext').css('color');
  
  
  var newsvg = '&lt;svg style="outline: 1px solid red; font-size: '+fontsize+'; overflow: visible; font-color:'+color+'" width="'+width+'" height="'+height+'"&gt;&lt;tspan x="0" y="0" width="'+width+'" height="'+width+'"&gt;&lt;text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle"&gt;'+spantext+'&lt;/text&gt;&lt;/tspan&gt;&lt;/text&gt;&lt;/svg&gt;';
  
  
  
  jQuery('.mytext').replaceWith(newsvg);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg text{
    text-anchor: middle;
    dominant-baseline: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  HTML SPAN VERSION: &lt;br&gt;&lt;br&gt;
  
  &lt;span class="originaltext" style="font-size:15px;color:red;"&gt;Text Should Look Like This&lt;/span&gt;&lt;br&gt;&lt;br&gt;
  
  SVG VERSION: (Red Border Added for Clarification)&lt;br&gt;&lt;br&gt;
  
  &lt;span class="mytext" style="font-size:15px;color:red;"&gt;Text Should Look Like This&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>