Wie kann ich die Farbe eines 'svg'-Elements ändern?

Question

Ich möchte diese Technik verwenden und die Farbe des SVG ändern, aber bisher war ich dazu nicht in der Lage. Ich benutze dies im CSS, aber mein Bild ist immer schwarz, egal was ich mache.

Mein Code:

.change-my-color {
  fill: green;
}

Answer 1

Schau dir diesen Code an. Es funktioniert.

CSS

svg {
   fill: white;
}

Answer 2

Ich fand es ein bisschen umständlich, aber es ist definitiv ein funktionierender Weg, um die Farbe eines SVG inklusive mit dem Tag dynamisch zu ändern.

In der SVG-Datei können Sie den CSS-Inhalt folgendermaßen hinzufügen:

            ...

Dort können Sie @media Regeln verwenden, mit denen das SVG außerhalb seiner selbst nach kontextuellen Umständen suchen kann. Es gibt eine aspect-ratio Media-Feature, das auf die SVG-Box (z.B. das Tag) zutrifft. Sie können verschiedene Kontexte für das SVG erstellen, indem Sie die SVG-Box ein wenig strecken.

Auf diese Weise können Sie auch das Favicon dasselbe SVG machen, das auf der Website erscheint, aber in einer anderen Farbe. (In diesem Fall sollten keine anderen SVG-Boxen quadratisch sein.)

/* img horizontal gestreckt (wenn SVG quadratisch ist) */
@media (min-aspect-ratio: 1000/999) {
    path {
        fill: blau;
    }
}

/* img vertikal gestreckt (wenn SVG quadratisch ist) */
@media (max-aspect-ratio: 999/1000) {
    path {
        fill: grün;
    }
}

/* img mit genauen Größen */
@media (aspect-ratio: 86/74) {
    path {
        fill: rot;
    }
}

/* Favicon mit hellem Browser-Design */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: light) {
    path {
        fill: schwarz;
    }
}

/* Favicon mit dunklem Browser-Design */
@media (aspect-ratio: 1/1) and (prefers-color-scheme: dark) {
    path {
        fill: weiß;
    }
}

Eine sehr wichtige Sache

Das SVG muss Informationen zum viewBox enthalten, sodass das Strecken die Grafiken nicht beeinflusst. Beispiel:

Answer 3

Für eine bessere Auflösung über Manish Menarias (vielen Dank für deine Hilfe) Antwort, verwenden Sie stattdessen diesen Filtergenerator anstelle eines vorgeschlagenen Generators: https://angel-rs.github.io/css-color-filter-generator/

.filter-green{
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

Answer 4

Wenn Sie dies mit einer Inline-SVG-Datei machen möchten, zum Beispiel als Hintergrundbild in Ihrem CSS-Inhalt:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

Natürlich ersetzen Sie die ... durch Ihren Inline-Bildcode.

Answer 5

Es gibt einige Probleme mit Manish Menarias Antwort, wenn wir die Farbe Weiß umwandeln, zeigt sie Grau.

Also habe ich einige Anpassungen hinzugefügt, und das folgende Beispiel zeigt speziell, wie man die Farbe im Material-Icon ändert:

.draft-white{
    filter: brightness(0) invert(1);
}