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

Sie könnten Ihr SVG als Maske festlegen. Auf diese Weise würde das Festlegen einer Hintergrundfarbe als Ihre Füllfarbe fungieren.

HTML

CSS

.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Bitte überprüfen Sie, ob Ihr Browser diese Funktion unterstützt: https://caniuse.com/#search=mask

Answer 2

Versuchen Sie es mit reinem CSS:

.logo-img {
  /* zu schwarz */
  filter: invert(1);
  /* oder zu blau */
  filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

Weitere Informationen in diesem Artikel https://blog.union.io/code/2017/08/10/img-svg-fill/

Answer 3

Wenn Ihr Ziel nur darin besteht, die Farbe des Logos zu ändern, und Sie nicht unbedingt CSS verwenden müssen, verwenden Sie kein JavaScript oder jQuery, wie es von einigen früheren Antworten vorgeschlagen wurde.

Um die ursprüngliche Frage genau zu beantworten, tun Sie einfach:

1. Öffnen Sie Ihre logo.svg in einem Texteditor.

2. Suchen Sie nach fill: #fff und ersetzen Sie es durch fill: #000

Zum Beispiel könnte Ihr logo.svg so aussehen, wenn es in einem Texteditor geöffnet wird:

... einfach die Füllung ändern und speichern.

Answer 4

Wenn Sie eine dynamische Farbe möchten, kein Javascript verwenden möchten und kein Inline-SVG verwenden möchten, verwenden Sie eine CSS-Variable. Funktioniert in Chrome, Firefox und Safari. bearbeiten: und Edge

Ersetzen Sie in Ihrem SVG alle Vorkommen von style="fill: #000" durch style="fill: var(--color_fill)".

Answer 5

Ändern Sie Ihre SVG-Datei, fügen Sie fill="currentColor" zum svg-Tag hinzu und vergewissern Sie sich, dass Sie jede andere Füllungseigenschaft aus der Datei entfernen.

Zum Beispiel:

...

Beachten Sie, dass currentColor ein Schlüsselwort ist (keine feste Farbe in Benutzung).

Danach können Sie die Farbe mit CSS ändern, indem Sie die color-Eigenschaft des Elements oder seines Elternelements festlegen.

Beispiel:

.div-with-svg-inside {
    color: red;
}

Ich habe vergessen zu sagen, Sie müssen das SVG folgendermaßen einfügen:

Wenn das Bild von einer Variablen kommt, dann

Beachten Sie, dass #img die ID des svg-Tags innerhalb der SVG-Datei ist. Beachten Sie auch, dass xlink:href veraltet ist und stattdessen href verwenden sollten oder beides verwenden können, um ältere Browser-Versionen zu unterstützen.

Ein weiterer Weg, dies zu tun: https://css-tricks.com/cascading-svg-fill-color/