jquery - HTML5SVG要素のすべての要素の位置を取得するにはどうすればよいですか

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()メソッドを呼び出す必要があります。

これにより、次の構造を持つオブジェクトが返されます (たとえば、100x100 のサイズの位置 (0 ,0) にあるオブジェクトを使用)。

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