svg groups and fill inheritance -

my goal have first group of 3 squares blue , next group of 3 squares red. minimize code, want take advantage of grouping in svg. rectangles remain blue. have tried inline styling on second group element , on use element, doesn't solve problem. thank assistance.. here's code:

<svg width="1000" height="800"  xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">  <style> .blue {fill:blue;} .red {fill:red;} </style>  <g id="g1" class="blue">     <rect x="0" y="0" width="100" height="100" />     <rect x="0" y="105" width="100" height="100" />     <rect x="0" y="210" width="100" height="100" /> </g>  <g class="red"> <use xlink:href="#g1" transform="translate(0,315)"  /> </g> 

here changes above have working:

<g class="blue"> <g id="g1">     <rect x="0" y="0" width="100" height="100" />     <rect x="0" y="105" width="100" height="100" />     <rect x="0" y="210" width="100" height="100" /> </g> </g>  <g class="red" transform="translate(0,315)"> <use xlink:href="#g1" /> <!-- <g id="g1">     <rect x="0" y="0" width="100" height="100" />     <rect x="0" y="105" width="100" height="100" />     <rect x="0" y="210" width="100" height="100" /> </g> --> </g> 

... commented out of old svg well.

here's solution in clearer form (some of commented code above, came further experimenting).

<svg width="1000" height="800"  xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">  <style> .blue {fill:blue;} .red {fill:red;} </style>   <g class="blue"> <g id="g1">     <rect x="0" y="0" width="100" height="100" />     <rect x="0" y="105" width="100" height="100" />     <rect x="0" y="210" width="100" height="100" /> </g> </g>  <g class="red" transform="translate(0,315)"> <use xlink:href="#g1" /> </g> 

looks styling needs done @ level above group in case , robert pointed out retrieve previous group written.