Dynamically and Accurately Replace HTML span with SVG text with correct positioning-CodePudding

I would like to replace a regular HTML span with the same text but in SVG format.

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.

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.

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.

I even added text anchor and dominant baseline properties per this post:

How to place and center text in an SVG rectangle

But that doesn't seem to do anything.

Here is what I have so far.

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 = '<svg style="outline: 1px solid red; font-size: ' fontsize '; overflow: visible; font-color:' color '" width="' width '" height="' height '"><tspan x="0" y="0" width="' width '" height="' width '"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">' spantext '</text></tspan></text></svg>';



jQuery('.mytext').replaceWith(newsvg);

svg text{
  text-anchor: middle;
  dominant-baseline: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

HTML SPAN VERSION: <br><br>

<span  style="font-size:15px;color:red;">Text Should Look Like This</span><br><br>

SVG VERSION: (Red Border Added for Clarification)<br><br>

<span  style="font-size:15px;color:red;">Text Should Look Like This</span>

CodePudding user response：

Something like this? It's in the centre of the box.

I've replaced the jQuery assignment with innerHTML as jQuery and SVG don't really work together.

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 = '<svg style="outline: 1px solid red; font-size: ' fontsize '; overflow: visible; font-color:' color '" width="' width '" height="' height '"><text dominant-baseline=" ideographic" y="' height '"><tspan>' spantext '</tspan></text></svg>';



document.querySelector('.mytext').innerHTML = newsvg;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

HTML SPAN VERSION: <br><br>

<span  style="font-size:15px;color:red;">Text Should Look Like This</span><br><br>

SVG VERSION: (Red Border Added for Clarification)<br><br>

<span  style="font-size:15px;color:red;">Text Should Look Like This</span>