Zugriffspfad Eigenschaften von svg über CSS

Question

Ich habe meine svg Bild mit Illustrator und der Inhalt sieht wie folgt gespeichert:

<?xml version="1.0" encoding="utf-8"?> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="10.3 126 503.7 272" style="enable-background:new 10.3 126 503.7 272;" xml:space="preserve"> 
<style type="text/css"> 
    .st0{fill:#B7B7B7;} 
    .st1{fill:#33BFC1;} 
    .st2{fill:#B23939;} 
</style> 
<path fill="#B7B7B7" class="st0" d="M20.4,126h113c4.3,0,8"/> 
<path class="st1" d="M504,126H390c-4.3,0-8,2.7-9.4,6"/> 
<path class="st2" d="M420.9,384.6l-92.2-252"/> 
</svg> 

In meinem html Ich habe:

<a><img class="logo" src="logo.svg"></a> 

Da es 3 Pfad Innerhalb von Svg möchte ich in der Lage sein, jeden mit CSS zu stylen. Ich weiß, dass ich direkt Svg-Datei bearbeiten kann, aber die Idee ist, es über CSS zu ändern.

Ich habe etwas versucht, wie

.st0 { 
fill:#fff 
} 
.st0 path { 
fill:#fff 
} 

aber nichts davon funktioniert

Answer 1

Dies sollte funktionieren, nur dann, wenn es nach der vorherige .st0 Erklärung gegeben.

.st0 { 
fill:#fff 
} 

Dies ist der richtige Weg, um das zweite Beispiel zu deklarieren.

path.st0 { 
fill:#fff 
} 

Aber beide müssen nach dem SVG-Code-Block sein.

Was ich denke passiert ist, dass Sie die SVG in Ihrem Körper haben, und Sie erklären die CSS in den Kopf. Deine Füllung: #fff wird also vom CSS innerhalb des SVG-Elements überschrieben.