Как получить позицию рендера группы?

Question

Обратитесь к приведенному ниже коду, положение ограничивающей рамки не является фактической позицией рендера группы элементов.

Элемент группы может быть использован для создания очень сложного устройства, такого как танк/корабль с пушками. И элемент группы не имеет свойств X или Y, чтобы помочь перемещать внутренние элементы, поэтому я должен использовать преобразование для перемещения Танка/Корабля.

Однако я понял, что когда я переводил группу, ограничивающая рамка больше не отражает реальную позицию рендера, может ли кто-нибудь понять, как получить фактическую позицию рендеринга группы?

http://jsfiddle.net/k4uhwLj4/

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/