动态准确地用正确定位的 SVG 文本替换 HTML span

Question

我想用相同的 SVG 格式文本替换常规 HTML 跨度。

我看过这样的例子，但是例子里好像只是手动输入的定位，即x=10和y=10，但我不确定是什么原因。

使用 span 我可以将文本垂直居中和水平居中，但是使用 SVG 似乎我必须具体告诉它在父元素中将文本放在哪里，默认情况下不设置 x 或 y 将文本放在外面框架。

这不一定是坏事，但我不知道如何正确定位它。特别是因为默认定位似乎将文本放在父 SVG 视图的上方和外面。

我什至添加了文本锚点和主要基线属性 post:

How to place and center text in an SVG rectangle

但这似乎没有任何作用。

这是我目前的情况。

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>

Answer 1

是这样的吗？它在盒子的中央。

我已经用 innerHTML 替换了 jQuery 赋值，因为 jQuery 和 SVG 不能真正协同工作。

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>

动态准确地用正确定位的 SVG 文本替换 HTML span

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

jquery

svg