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

Question

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 class="originaltext" style="font-size:15px;color:red;">Text Should Look Like This</span><br><br>

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

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

Robert Longson · Accepted Answer · 2022-05-24T15:03:19.660

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 class="originaltext" style="font-size:15px;color:red;">Text Should Look Like This</span><br><br>

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

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

Thanks Robert. That seems to work. What is the major change? The dominant-baseline setting? Also, fyi, You might want to edit the text and tspan tags as there looks to be an extra one. Thanks for your help! — CRAIG, May 24 '22 at 14:04

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

1 Answers1