如何使用jquery在SVG中将文本放置或定位在矩形内

Question

我想根据文本的宽度和高度以及矩形和高度将文本放在矩形的中心。请参考以下SVG代码。

<g transform="translate(73,535)" id="container_svg_ToolTip">
<rect id="container_svg_SvgRect" x="314.58333333333337" y="-85.60000000000001" width="16" height="16" fill="white" stroke-width="1" stroke="Black"/>
<text id="container_svg_ToolTipText_4" x="314.58333333333337" y="-85.60000000000001" fill="black" font-size="12px" font-family="Times New Roman" font-style="Normal " text-anchor="start" clip-path="url(#container_svg_ChartAreaClip)" dominant-baseline="middle">40
</text></g>

我想根据最大文本大小（宽度和高度）设置矩形宽度和高度，然后我想将文本放在矩形的中心。需要一些计算才能做到这一点..不需要添加像 rectX + 10，rectY + 10 这样的填充值，如下面链接所示。

SVG: text inside rect

请参阅下面的屏幕截图。

谢谢，

希瓦

Answer 1

这应该有效：

        var text = $("#my_svg #container_svg_ToolTipText_4");
        var width = text.innerWidth();
        var rect = $("#my_svg #container_svg_SvgRect");
        rect.attr("width", width + 10);

如果将rect的x值设置为比文本的x单位小5个单位，则它将居中。将rect的y值设置为比文本的y单位小~10个单位或使用innerHeight计算文本的高度。