SVGは、グループを再利用しますが、色

Question

を埋める変更だから私はその中にいくつかの<rect>sで<g>要素を持っている、それらはすべて同じ塗りつぶしの色を持っていますが、異なるサイズのものとすることができます。私はそれが可能である、<g>を再利用しますが、別の色でそれを埋めるためにしたいですか？

私はマークアップ私は好きなように変更することができます。

Answer 1

あなたがそうのような<defs>を使用してRECTグループを定義することができます。

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

例えば3210

、以下を参照してください。http://dl.dropbox.com/u/169269/rect_group.svg