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

Für Angular-Benutzer war die "inline-svg-2" npm-Bibliothek ziemlich nützlich:

• https://www.npmjs.com/package/ng-inline-svg-2
• Ersetzen Sie durch
• set CSS "color:" in screen's SCSS-Datei
• verwenden Sie fill="currentColor" oder stroke="currentColor" in Ihren SVG-Bildern.

Sie können jetzt dynamisch Ihre CSS-Farben konfigurieren, einschließlich CSS-Variablen, und das SVG passt sich an.

Hinweis: Der Trick mit "currentColor" funktioniert nur für eingebettete SVGs, deshalb benötigen wir ein spezielles Modul dafür.

Answer 2

Ein guter Ansatz ist es, einen Mixin zu verwenden, um die Strichfarbe und die Füllfarbe zu kontrollieren. Meine 'svg's werden als Symbole verwendet.

@mixin icon($color, $hoverColor) {
    svg {
        fill: $color;

        circle, line, path {
            fill: $color
        }

        &:hover {
            fill: $hoverColor;

            circle, line, path {
                fill: $hoverColor;
            }
        }
    }
}

Dann können Sie Folgendes in Ihrer SCSS-Datei tun:

.container {
    @include icon(weiß, blau);
}

Answer 3

Fügen Sie einfach fill:"desiredColor" in das svg-Tag des Bildes ein: Beispiel:

Answer 4

Öffnen Sie Ihr Bild mit einem Browser, klicken Sie mit der rechten Maustaste auf das Bild, klicken Sie auf Seitenquelltext anzeigen und Sie sehen das SVG-Tag des Bildes. Kopieren Sie es und fügen Sie es in Ihr HTML ein, ändern Sie dann die Füllung in die Farbe Ihrer Wahl.

Answer 5

Funktioniert in Chrome zuletzt überprüft im August 2023

Fügen Sie einfach ein div mit einer Klasse hinzu

Fügen Sie dann diesen Style hinzu

    .icon {
    -webkit-mask: url(SVG.svg);/*Ihre SVG-Datei hier*/
    mask: url(SVG.svg) ;
    Hintergrundfarbe: blau; /* oder jede Farbe Ihrer Wahl. */
    Breite: 200px !wichtig;
    Höhe: 200px !wichtig;
   }