javascript - 以 svg 为单位获取 g 边界框

Question

我正在尝试在Javascript中实现一个菜单，其中单个菜单项为. 要将一个项目标记为选中，我想在menu-item顶部移动另一个。svg:gsvg:g

为此，我需要获取菜单项(= svg:g) 的边界框，以便将矩形 (x, y, width, height) 应用于另一个。我还没有找到一种方便的方法来获取 a 的边界框svg:g。

我能想到的唯一方法是递归到孩子身上并手动计算边界框（近似值）。有没有更优雅的方式？

Answer 1

您应该能够使用getBBox您的 group 元素的方法。
例如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);