SVG重用一个组但改变填充颜色

Question

所以我有一个<g>元素，里面有一些<rect>s，它们都有相同的填充颜色，但可以是不同的大小。我想重复使用<g>，但用不同的颜色填充它，有可能吗？

我可以以任何我喜欢的方式更改标记。

Answer 1

您可以定义使用<defs>的矩形组，像这样：

<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> 

然后你可以用这组多次，将它放在不同的地方与transform，如果你喜欢：

<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> 

您可以直接设置这些组的样式，也可以按照以上方式为它们分配不同的类并使用CSS进行设置：

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

例如，请参阅：http://dl.dropbox.com/u/169269/rect_group.svg