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

Lösung 1 - Bearbeiten Sie das SVG, um auf die currentColor zu verweisen

... fill: currentColor stroke: currentColor ...

Dann können Sie die Farbe des Strichs und der Füllung über Ihren CSS-Inhalt steuern:

svg {
  color: blue; /* Oder eine Farbe Ihrer Wahl. */
}

Pro und Kontra:

• Einfach und verwendet konventionelle unterstützte CSS.

Geeignet wenn:

• Sie das SVG steuern
• SVG kann inline im HTML eingebunden werden.

Lösung 2 - CSS Maskeneigenschaft

  .icon {
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-image: url(https://url.of.svg/....svg);
    mask-image: url(https://url.of.svg/....svg);
    background-color: blue; /* Oder eine Farbe Ihrer Wahl. */
    width: 20px;
    height: 20px;
  }

}

Pro und Kontra

• Relativ einfach zu verwenden
• Die Browserunterstützung für die mask CSS-Eigenschaft ist teilweise.

Geeignet wenn:

• SVG extern ist und über eine URL eingebunden wird
• Für den Einsatz in modernen bekannten Browsern gedacht ist.

Lösung 3 - CSS-Filtereigenschaft - statische Farbe

Wenn die Farbe im Voraus bekannt ist, können Sie https://codepen.io/sosuke/pen/Pjoqqp verwenden, um den benötigten Filter zu finden, um Ihr SVG in die gewünschte Farbe zu ändern. Zum Beispiel, um das SVG in #00f zu konvertieren:

.icon {
    filter: invert(8%) sepia(100%) saturate(6481%) hue-rotate(246deg) brightness(102%) contrast(143%);
}

Wenn Ihre Originalfarbe nicht schwarz ist, fügen Sie der Liste der Filter brightness(0) saturate(100%) voran, um sie zuerst in Schwarz umzuwandeln.

Pro und Kontra:

• Es könnte einen kleinen, nicht signifikanten Unterschied zwischen dem Ergebnis und der gewünschten Farbe geben.

Geeignet wenn:

• Gewünschte Farbe im Voraus bekannt ist.
• Externe Bildquelle

Answer 2

Ich habe eine Testseite hinzugefügt - um SVG über Filtereinstellungen zu färben:

Zum Beispiel,

filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg)

Hochladen & Färben Sie Ihr SVG - Jsfiddle

Ich habe die Idee von: Austausch der Füllfarbe bei Image-Tag SVGs

Answer 3

SVG Maske auf einem Feld-Element mit einer Hintergrundfarbe ergibt:

body{ overflow:hidden; }

.icon {
  --size: 70px;
  display: inline-block;
  width: var(--size);
  height: var(--size);
  transition: .12s;

  -webkit-mask-size: cover;
  mask-size: cover;
}

.icon-lightning {
  --lightning-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill-rule='evenodd' d='M14.615 1.595a.75.75 0 0 1 .359.852L12.982 9.75h7.268a.75.75 0 0 1 .548 1.262l-10.5 11.25a.75.75 0 0 1-1.272-.71l1.992-7.302H3.75a.75.75 0 0 1-.548-1.262l10.5-11.25a.75.75 0 0 1 .913-.143Z' /%3E%3C/svg%3E");

  background: black;
  animation: 2s frames infinite linear;

  -webkit-mask-image:var(--lightning-mask);
  mask-image:var(--lightning-mask);
}

@keyframes frames { 
  25% { background: cyan; }
  75% { background: gold; }
}

---

_{Hinweis - SVG-Masken werden in <em>Internet Explorer</em>-Browsern nicht unterstützt}

Answer 4

Der einfachste Weg wäre, eine Schrift aus dem SVG zu erstellen, indem Sie einen Service wie https://icomoon.io/app/#/select oder ähnliches verwenden. Laden Sie Ihr SVG hoch, klicken Sie auf "Schriftart generieren", fügen Sie Schriftdateien und CSS-Inhalte in Ihre Seite ein und verwenden und gestalten Sie sie einfach wie jeden anderen Text. Ich verwende es immer so, weil es das Styling viel einfacher macht.

Aber wie im Artikel erwähnt, kommentiert von @CodeMouse92, vermasseln Icon-Schriften Bildschirmlesegeräte (und sind möglicherweise schlecht für SEO). Halten Sie sich also eher an die SVGs.

Answer 5

Um die Farbe eines SVG-Elements zu ändern, habe ich eine Möglichkeit entdeckt, während ich mir das Google-Suchfeld-Suchsymbol unten angesehen habe:

.search_icon {
  color: red;
  fill: currentColor;
  display: inline-block;
  width: 100px;
  height: 100px;
}

Ich habe ein _span_ Element mit "display:inline-block", Höhe, Breite und das spezielle Style "color: red; fill: currentColor;" für das span Tag verwendet, das vom untergeordneten svg Element geerbt wird.