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

Wenn Ihre Form(en) immer eine feste Farbe haben und Sie mehr als ein Paar haben, können Sie Fontello verwenden und eine benutzerdefinierte Symbol-Schriftart mit einer ganzen Serie Ihrer eigenen benutzerdefinierten SVG-Formen erstellen. Dann können Sie alle Größen und Farben nur mit CSS festlegen/animieren.

Für alle möglichen Anwendungsfälle für diese Frage ist dies ein wichtiges Paradigma zu beachten. Ich habe es in vielen Projekten verwendet. Auf jeden Fall, wenn Sie noch nicht von Fontello gehört haben, müssen Sie sich darüber informieren. Wenn Sie von einer ähnlichen Lösung wissen, die besser ist, würde ich gerne davon erfahren.

Mögliche Nachteile:

1. Symbol-/Form-Schriften beeinträchtigen bekanntermaßen Bildschirmleser, sodass dies einiges an Handhabung erfordern kann.

2. Fontello kann beim Importieren von Formen wählerisch sein und es kann einige Versuche und Fehler beim Erstellen und Exportieren erfordern. Vermeiden Sie jegliches Gruppieren und verwenden Sie nur einzelne nicht verschachtelte Verbundformen.

Answer 2

Direkt zum SVG-Füllen CSS wird nicht funktionieren, Sie können es wie folgt verwenden

svg path {
    fill: red;
}

Dies hat für mich funktioniert