我々はサイト全体で使用している一般的なアイコンの

Question

私は埋め込んだSVG定義CSSとSVGでのスタイリングのサブクラス：

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none"> 
    <symbol id="icon-1" viewbox="0 0 113.8 113.8"> 
    <title>Icon 1</title> 
    <g> 
     <circle class="st2 outter-circle" cx="56.9" cy="56.8" r="55" /> 
     <line class="st1" x1="56.9" y1="71.5" x2="56.9" y2="86.3" /> 
    </g> 
    </symbol> 
</svg> 

その後

私は含めています（この例のためにすることを切り捨て）

<svg viewBox="0 0 100 100" class="campus-icon white five-eighths"> 
    <use xlink:href="#icon-1"></use> 
</svg> 

SVGオブジェクトのクラスを設定することで、アイコンの配色を選択することができます。

これらは、デフォルトのスタイルです：

.st1 { 
    fill:none; 
    stroke:#363636; 
    stroke-width:0.75; 
    stroke-linecap:round; 
    stroke-linejoin:round; 
    stroke-miterlimit:10; 
} 

.st2 { 
    fill:none; 
    stroke:#363636; 
    stroke-width:2; 
    stroke-miterlimit:10; 
} 

私は何をやってみましたと、SVGオブジェクトのクラスは、アイコンのストローク色の定義を支援できるようにされています

.campus-icon.white .st1, 
.campus-icon.white .st2 { 
    stroke: #FFF; 
} 

これはで動作するようですFirefoxでは使用できますが、ChromeやSafariでは使用できません。

私のアイコンには2つの色がありますので、これが本当に（もし可能であれば）理解する必要があります。

私はSafariとChromeから、SVGオブジェクトのセレクタを使用してSVG自体のセレクタを使用することはできません。

この理論をテストするために、私はこの実例（SVG CSS Hover Styling）をとり、CodePenインスタンス（http://codepen.io/ericrovtar/pen/ZeZqRE）を作成しました。

誰かがこれを達成する方法があるかどうかを知っていますか？

ありがとうございます！

-Eric

Answer 1

残念ながら、Firefoxの動作は非標準の準拠です。参照される要素のコンポーネントは、別個のCSSパースツリーを持つシャドーDOMの内側に置かれるはずです。

しかし、シャドウツリーの要素であるは、<use>という要素ののスタイルを継承しています。

A-アイコンは、1つの色が常にストロークに適用され、もう1つが塗りつぶしになるように定式化することができれば、シンボルのこれらの色の定義を省略し、それらはuse要素のクラス用です。あなたは同様に色の部分にあなたのアイコンを分割して個別にこれらを参照する必要があり、より複雑な例については、私は -

.st1 { 
    fill:none; 
    stroke-width:0.75; 
    stroke-linecap:round; 
    stroke-linejoin:round; 
    stroke-miterlimit:10; 
} 

.st2 { /* the element beeing a rectangle instead of a line */ 
    stroke:none; 
} 

.campus-icon.white { 
    stroke: #FFF; /* could apply to .st1 */ 
    fill: #DDD; /* could apply to .st2 */ 
} 

B。 e。

<svg viewBox="0 0 100 100" class="campus-icon white five-eighths"> 
    <use class="part-1" xlink:href="#icon-1-part-1"></use> 
    <use class="part-2" xlink:href="#icon-1-part-2"></use> 
</svg>