SVG/CSS - 異なる色で異なるパスを塗りつぶします。

Question

私は、パス、楕円などの異なるパスを持つSVGを持っています。赤と言う。&青。さて、私はスプライトにそれらをすべて入れて、今はホバリングでCSSを塗りつぶしの色を変更したいので、私は通常、svgから塗りつぶしを取り除き、CSSのfillプロパティですべてを行います。

ここで色が違うので、すべてを実行することはできません。すべてが赤であるため、一部は青色にします。

Answer 1

あなたはパスのそれぞれに異なるクラスを追加することができます

<circle class="circleClass" cx="40" cy="50" r="26"/> 
<square class="squareClass" cx="40" cy="50" r="26"/> 

次に、あなたのCSSにこれらのクラスをターゲット：

.circleClass { 
    fill: red; 
} 

Answer 2

あなたはすべてのパスにクラスを追加したり、使用することができますn番目の子供。ここで

は簡単な例です：

<path bla-bla-bla> 
<path bla-bla-bla> 
<path bla-bla-bla> 

path:nth-child(1){ 
    fill:red; 
} 

path:nth-child(2){ 
    fill:blue; 
} 

path:nth-child(3){ 
    fill:green; 
} 

Answer 3

あなたが働くことができない何をしています。 <use>で参照されるものは、<use>要素のDOMには存在しません。クラスouterとパスが.iconの子孫ではないので

.icon:hover .outer { } 

は動作しません。シンボルの内容のスタイルを設定するには、シンボルに直接ルクルを適用する必要があります。例：

#btn-tester .outer { } 

残念ながら:hoverイベントはシンボルには適用されません。だからあなたはできません：

#btn-tester:hover .outer { } 

でも、とにかくそれをやりたくないかもしれません。ページ上にシンボルの他の用途があった場合は、それも変更されます。

おそらく、SVGを必要なページにインライン化するだけです。シンボルを使用する代わりに。