HTML5 SVG 요소의 모든 요소 위치를 얻는 방법

Question

https://moqups.com/과 비슷한 프로그램을 만들고 있는데 SVG 태그 내의 모든 요소 좌표를 가져 오는 방법을 알 수 없습니다.

Answer 1

var children = $('svg').children(); 

for(var i in children) { 
    childLoop(children[i]);     // Start with children because I don't think svg has 
              // A getBBox() method (only groups, rects, text..etc) 
} 

function childLoop(obj) { 
    alert($(obj).getBBox());    // Display the objects bounding box 
              // Bounding boxes have .x, .y, 
              // .width, and .height properties 
    for(var a in $(obj)[0].attributes) { 
     alert(a + '=' + $(obj)[0].attributes[a]); 
    } 
    for(var i in $(obj).children()) { 
     childLoop($(obj).children()[i]); // Do it for the rest of the children 
    } 
} 

은 기본적으로 당신은 SVG 개체 내부의 요소를 선택하고 그 위에 .getBBox() 메소드를 호출 할 필요가있다.

이 다음 구조를 갖는 객체를 반환한다 (위치 (0에서 객체를 사용하여, 0), 예를 들면 100 × 100 치수)

.getBBox() : { 
     x: 0 
     y: 0 
     width: 100 
     height: 100 
    }