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
  }

如何获取HTML5 SVG元素中所有元素的位置

1 个答案: