私は単一のSVGアイコンの複数のインスタンスが必要です

Question

私は単一のアイコンを持っています。これは私が

<img src="../assets/layouts/layout3/svgs/star-def.svg" 
width="15" height="15" /> 

は、そのが正しく何の問題を表示しない、このような文書に挿入しているが、私は、その必要性は、色を変更しているしたい、要するに、私は同じアイコン使ってCSSの複数のカラーバリエーションを必要とします。手段、私はクラスを変更することができます&アイコンはその色になるはずです。 私は使ってみましたが、それは起こっていません。私のhtmlの&下のCSSを入力してください。

HTML： -

<img src="../assets/layouts/layout3/svgs/star-def.svg" class="greenfill" 
    width="15" height="15" /> 

& CSS

.greenfill { fill:#569e26;} 

私は、エディタ&でファイルを開きました注 が&から塗りつぶしの色を変更し、異なる色のアイコンを持っていますしかし、私はこれをしたくない。

ありがとうございます。

Answer 1

ここ

http://jsfiddle.net/wuSF7/462/

svg { 
    width: 350px; height: 350px; 
} 

svg path { 
    fill: yellow !important; 
} 

Answer 2

を答えを確認してください、私はそれはあなたがそれぞれの色のクラスで必要な回あなたがSVGでgまたはsymbolとの参照を作成し、その後useべきだと思います。

塗りつぶしやストロークを塗りつぶすために使用しているアイテムや、円などのパスを選択する必要がある場合も同じです。オブジェクト.greenfill{fill:#569e26;}全体または各サブエレメント.greenfill g rect{fill:#569e26;}を選択することができます。

<svg> 
    <style> 
    .greenfill{fill:#569e26;} 
    .redfill{fill:red;} 
    </style> 
    <defs> 
    <g id="star-def"><!-- ... --></g> 
    </defs> 

    <use xlink:href="#star-def" class="greenfill" /> 
    <use xlink:href="#star-def" class="redfill" /> 
    <!-- ... --> 

</svg>