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

我想基于文本的宽度和高度以及矩形的宽度和高度将文本放置在矩形的中心。请参考下面的SVG代码。如何使用jquery在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

请参考下面的截图。

enter image description here

感谢，

湿婆

来源

2013-05-01 SivaRajini

这应该工作：

 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计算文本的高度。

来源

2013-05-01 13:14:43

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

回答

相关问题