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