IT TIP

svg : g 요소의 너비를 얻는 방법

itqueen 2020. 12. 2. 22:20
반응형

svg : g 요소의 너비를 얻는 방법


현재 svgJavaScript 요소로 작업하고 있습니다. 그리고 나는 이것에 익숙하지 않습니다.

내 질문은 svg여러 svg:g요소 가있는 요소 가 있다는 것 입니다. 그리고 내 svg:g요소에는 다양한 다른 svg 요소가 있습니다.

    <svg>
     <g class="my-class">
      <g class "c1">
         <text style="font-size: 9" x="0" y="-4"> john </text>
         <text style="font-size: 9" x="70" y="-4"> 13 </text>
      </g> 
      <g class="c2">
         <text style="font-size: 9" x="0" y="-4"> john </text>
         <text style="font-size: 9" x="70" y="-4"> 13 </text>
      </g> 
      <g class="c3">
         <text style="font-size: 9" x="0" y="-4"> john </text>
         <text style="font-size: 9" x="70" y="-4"> 13 </text>
      </g> 
    </g>
   </svg>

g 동적으로 내

g "my_class"

이제 svg너비를 너비와 동일하게 설정하고 싶습니다 g.my_class.

var svgWidth  =   $('.my-class').width()
alert(svgWidth);

그러나 그것은 나에게 0을 준다. 브라우저에서 노란색 도구 설명 상자로 어떻게 볼 수 있습니까?여기에 이미지 설명 입력

이 선을 선택하면

누구든지 친절하게 안내해 줄 수 있습니까? 이 일을 제대로하고 있습니까? 아니면 어떻게 이룰 수 있습니까? 감사


시험 .getBoundingClientRect

$('.my-class')[0].getBoundingClientRect().width;

데모 http://jsfiddle.net/5DA45/


getBBox(SVG 1.1의 일부인) 권장합니다 getBoundingClientRect.

$('.my-class')[0].getBBox().width;

데모 http://jsfiddle.net/TAck4/

참고 URL : https://stackoverflow.com/questions/11702952/how-to-get-the-width-of-an-svgg-element

반응형