jquery - 如何获取 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) 位置使用一个尺寸为 100x100 的对象）：

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