SVG reutilización de un grupo, pero cambiar el color de relleno

Question

Así que tener un elemento <g> con un poco de <rect>s su interior, todos ellos tienen el mismo color de relleno, pero puede ser de diferentes tamaños. Quiero reutilizar el <g>, pero llenarlo con un color diferente, ¿es posible?

que puede cambiar el marcado de cualquier manera que me gusta.

Answer 1

Puede definir el grupo rect usando <defs> así:

<defs> 
    <g id="rect-group"> 
     <rect x="0" y="0" width="60" height="30"/> 
     <rect x="20" y="10" width="20" height="50"/> 
    </g> 
</defs> 

continuación, puede utilizar este grupo varias veces, poniéndolo en diferentes lugares con la transform si te gusta:

<g class="group-1" transform="translate(10.5,20.5)"> 
    <use xlink:href="#rect-group" /> 
</g> 

<g class="group-2" transform="translate(55.5,32.5)"> 
    <use xlink:href="#rect-group" /> 
</g> 

Puede aplicar estilos a estos grupos directamente o asignarles clases diferentes como se indica anteriormente y usar CSS para crear el estilo que desee:

<style> 
    .group-1{ 
     fill: red; 
     stroke: white; 
    } 
    .group-2{ 
     fill: blue; 
     stroke: black; 
    } 
    </style> 

Por ejemplo, ver: http://dl.dropbox.com/u/169269/rect_group.svg