Img src SVG die Styles mit CSS ändern

Question

html

css

.logo-img path {
  fill: #000;
}

Das obige SVG wird geladen und ist standardmäßig fill: #fff, aber wenn ich den obigen css verwende, um es auf schwarz zu ändern, ändert es sich nicht. Das ist das erste Mal, dass ich mit SVG experimentiere und ich bin mir nicht sicher, warum es nicht funktioniert.

Answer 1

Einfach...

Sie können diesen Code verwenden:

Spezifizieren Sie zuerst den Pfad der SVG-Datei und schreiben Sie dann deren ID, in diesem Fall "Capa_1". Sie können die ID der SVG-Datei erhalten, indem Sie sie in einem Editor öffnen.

In CSS:

.logo {
  fill: red;
}

Answer 2

Die Antwort von @Praveen ist solide.

Ich konnte es nicht schaffen, in meiner Arbeit darauf zu antworten, also habe ich eine jQuery Hover-Funktion dafür erstellt.

CSS

.svg path {
   transition:0.3s all !important;
}

JS / JQuery

// Code von oben in eine Funktion verpackt
replaceSVG();

// Hover-Funktion
// Über ein Element schweben und das SVG finden, das du ändern möchtest
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});

Answer 3

Wenn Sie das Bild nur zwischen der echten Farbe und dem Schwarzweiß umschalten, können Sie einen Selektor wie folgt festlegen:

{filter:none;}

und ein anderer als:

{filter:grayscale(100%);}

Answer 4

Da SVG im Grunde genommen Code ist, benötigen Sie nur Inhalte. Ich habe PHP verwendet, um den Inhalt zu erhalten, aber Sie können verwenden, was Sie möchten.

Dann habe ich den Inhalt "wie erhalten" innerhalb eines div-Containers ausgegeben

Um schließlich Regeln für die SVG-Kinder des Containers in CSS festzulegen

.fill-class > svg {
    fill: orange;
}

Ich habe dieses Ergebnis mit einem Material-Icon-SVG erhalten:

Mozilla Firefox 59.0.2 (64-Bit) Linux

Google Chrome 66.0.3359.181 (Offizieller Build) (64 Bit) Linux

Opera 53.0.2907.37 Linux

Answer 5

Dies könnte hilfreich sein für Leute, die PHP in Kombination mit .svg-Bildern verwenden und diese mit CSS manipulieren möchten.

Man kann Eigenschaften innerhalb eines img-Tags nicht mit CSS überschreiben. Aber wenn der SVG-Quellcode in das HTML eingebettet ist, kann man das sicherlich tun. Ich löse dieses Problem gerne mit einer require_once-Funktion, in der ich eine .svg.php-Datei einfüge. Es ist wie das Importieren eines Bildes, aber man kann immer noch Stile mit CSS überschreiben!

Zuerst die SVG-Datei einfügen:

Und es enthält beispielsweise dieses Symbol:

Jetzt können wir die Füllfarbe ganz einfach so mit CSS ändern:

svg path {
  fill: blue;
}

Ich habe zuerst versucht, dieses Problem mit file_get_contents() zu lösen, aber die obige Lösung ist viel schneller.