svg - 如何使用 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：矩形内的文本

请参考下面的截图。

谢谢，

湿婆

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);

如果将矩形的 x 值设置为比文本的 x 单位小 5 个单位，它将居中。将矩形的 y 值设置为比文本的 y 单位小约 10 个单位，或者使用innerHeight.