如何获取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 
    }