在组之间排序形状

Question

我知道，在SVG中，形状按照文档中列出的元素的顺序显示，因此通过重新排序它们可以为前面带来所需的形状。但是，假设我有一个类似的文件：

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="500" version="1.1">
   <g transform="translate(10, 10)">
       <rect width="200" height="100" stroke="black" stroke-width="6" x="10" y="10" fill="green"/>
       <rect width="200" height="100" stroke="black" stroke-width="6" x="50" y="50" fill="red"/>
   </g>
   <g transform="translate(80, 80)">
       <rect width="200" height="100" stroke="black" stroke-width="6" x="10" y="10" fill="green"/>
       <rect width="200" height="100" stroke="black" stroke-width="6" x="50" y="50" fill="red"/>
   </g>
</svg>

（见JSFiddle）。在每组中，元素排列成使得红色矩形显示在相应的绿色矩形的顶部。但是，由于这些组也是按顺序排列的，因此第二组位于第一组之上。我希望所有红色矩形显示在所有绿色矩形的顶部，和保持如上所述分组。这可能在SVG / D3.js中吗？