3

単一のメニュー項目を使用してJavascriptでメニューを実装しようとしています。項目を選択済みとしてマークするには、別の項目をmenu-itemの上に移動したいと思います。svg:gsvg:g

このために、メニュー項目(= svg:g) のバウンディング ボックスを取得する必要があるため、rect (x、y、幅、高さ) を他の項目に適用できます。の境界ボックスを取得するための便利な方法をまだ見つけていませんsvg:g。

私が考えることができる唯一の方法は、子に再帰し、手動で境界ボックス (近似) を計算することです。もっとエレガントな方法はありますか？

4

1 に答える 1

3

getBBoxグループ要素のメソッドを使用できるはずです。
例http://jsfiddle.net/PFnre/1/

var root = document.createElementNS("http://www.w3.org/2000/svg", "svg");
document.body.appendChild(root);

var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
root.appendChild(g);

var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.setAttribute("x", "50");
r.setAttribute("y", "60");
r.setAttribute("width", "100");
r.setAttribute("height", "110");
r.setAttribute("fill", "blue");
g.appendChild(r);

var c = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c.setAttribute("cx", "150");
c.setAttribute("cy", "140");
c.setAttribute("r", "60");
c.setAttribute("fill", "red");
g.appendChild(c);

var bbox = g.getBBox();

var o = document.createElementNS("http://www.w3.org/2000/svg", "rect");
o.setAttribute("x", bbox.x);
o.setAttribute("y", bbox.y);
o.setAttribute("width", bbox.width);
o.setAttribute("height", bbox.height);
o.setAttribute("stroke", 'black')
o.setAttribute("fill", 'none');
root.appendChild(o);

于 2012-11-18T14:45:09.203 に答える