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

당신의 x 단위 미만 5 개 단위가되도록하는 구형의 x 값을 설정하는 경우 텍스트, 중앙에 배치됩니다. rect의 y 값을 텍스트의 y 단위보다 10 단위 작게 설정하거나 innerHeight을 사용하여 텍스트 높이를 계산합니다.