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

html {
  --iron-icon-fill-color-1: green;
  --iron-icon-fill-color-2: red;
  --iron-icon-stroke-color: white;
}

svg#icon-green {
  fill: var(--iron-icon-fill-color-1, currentcolor);
  stroke: var(--iron-icon-stroke-color, none);
}

svg#icon-red {
  fill: var(--iron-icon-fill-color-2, currentcolor);
  stroke: var(--iron-icon-stroke-color, none);
}

svg#icon {
  fill: var(--iron-icon-fill-color-x, currentcolor);
  stroke: white;
}

Answer 2

Mein Gebrauch ist mit Bootstrap Icons, indem ich deinen SVG-Pfad kopiere.

span{
    path{
        color: red;
    }
}

Ein Beispiel von SVG Bootstrap:

Answer 3

Der einfachste Trick ist, die Farbe beim Laden der Seite mit jQuery zu ändern.

      $(document).ready(function () { 
              $('svg').find('path').attr('fill', '#FFF');
      });

#FFF ist der Farbcode, den du setzen möchtest.

Answer 4

Sie können die SVG-Farbe mithilfe des fill-Attributs ändern

    Ihr SVG-Pfad hier

Überprüfen Sie hier die Demo

Answer 5

Wenn Sie die Farbe mit CSS ändern möchten, könnten Sie auch ein Online-Tool wie dieses verwenden: Ändern Sie die SVG-Farbe mit CSS-Filter