如何使用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中的矩形內放置或定位文本

回答

相關問題