Styling Subklassen in SVG mit CSS

Question

ich SVG-Definitionen für gemeinsame Symbole Einbettung wir in unserer gesamten Website verwenden:

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

(Abgeschnitten, dass für dieses Beispiel.)

Dann einschließlich ich es in meinem Markup als:

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

Das Problem, das ich in renne wird ein Farbschema für das Symbol der Auswahl durch eine Klasse für das SVG-Objekt festlegen.

Dies sind die Standard-Stile:

.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; 
} 

Was habe ich versucht, tut so dass die Klasse auf dem SVG Objekt Hilfe der Strichfarbe des Symbols definieren:

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

Dies scheint in Arbeit Firefox, aber nicht in Chrome oder Safari.

Da meine Icons zwei Farben haben, ist dies etwas, was ich wirklich herausfinden muss (wenn es überhaupt möglich ist).

Von was ich sagen kann Safari und Chrome erlauben mir nicht, einen Selektor auf dem SVG-Objekt, gefolgt von einem Selektor innerhalb der SVG selbst zu verwenden.

Um diese Theorie zu testen, nahm ich dieses Arbeitsbeispiel (SVG CSS Hover Styling) und erstellte eine CodePen-Instanz (http://codepen.io/ericrovtar/pen/ZeZqRE).

Wer weiß, ob es einen Weg gibt, dies zu erreichen?

Danke!

-Eric

Answer 1

Leider ist das Firefox Verhalten der Nicht-Standard-konformer ein. Die Komponenten der referenzierten Elemente sollen in einem Schatten-DOM mit einem separaten CSS-Syntaxbaum liegen.

Aber es gibt eine kleine Lücke: Elemente in der Schattenstruktur erben Stile von seinem Host <use> Element.

A - Wenn Sie Ihre Symbole so formulieren können, dass immer eine Farbe auf einen Strich und die andere auf eine Füllung angewendet wird, können Sie diese Farben für die Symbole definieren und nur festlegen sie für die Klassen der Gebrauchselemente.

.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 - Für komplexere Fälle Sie Ihre Symbole brechen in gleichfarbige Teile benötigen würde und diese einzeln verweisen, i. 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>