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

Ich schlage vor, Ihre Farbe auszuwählen und zu diesem Stift zu gehen https://codepen.io/sosuke/pen/Pjoqqp es wird HEX in CSS-Filter umwandeln z.B.:#64D7D6

gleich

filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);

der endgültige Auszug

.filterit{
width:270px;
filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
}