Question

参考下面的代码，边界框的位置不是元素组的实际渲染位置。

组元素可以用来构造一个非常复杂的单位，如坦克/船用大炮。并且组元素没有X或Y属性来帮助移动内部元素，因此我必须使用变换来移动Tank / Ship。

然而，我意识到当我翻译组时，边界框不再反映真实的渲染位置，是否有任何人知道如何获得组的实际渲染位置？

var root = document.createElementNS("http://www.w3.org/2000/svg", "svg");
root.style.width = '500px';
root.style.height = '500px';
document.body.appendChild(root);

var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttributeNS(null, 'transform', 'translate(50, 50)');
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");
r.setAttributeNS(null, 'transform', 'translate(50, 50)');
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);

Answer 1

根据这篇文章，.getBBox()方法不会将转换考虑在内（根据规范）：

How is the getBBox() SVGRect calculated?

要解决此问题，您可以添加没有转换属性的父g：

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

var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttributeNS(null, 'transform', 'translate(50, 50)');
parentG.appendChild(g);

http://jsfiddle.net/sydgc091/

如何获取组元素渲染位置？

1 个答案: