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

2020 Antwort

CSS Filter funktioniert in allen aktuellen Browsern

Um die Farbe von SVGs zu ändern

1. Fügen Sie das SVG-Bild mit einem Tag hinzu.

2. Um auf eine spezifische Farbe zu filtern, verwenden Sie den folgenden Codepen (hier klicken, um den Codepen zu öffnen) um einen hexadezimalen Farbcode in einen CSS-Filter umzuwandeln:

   Zum Beispiel ist die Ausgabe für #00EE00

   filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%);

   Generieren Sie einen filter für jede Farbe hier.

3. Fügen Sie den CSS filter in diese Klasse ein.

   .filter-green{
       filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
   }

Answer 2

Um die Farbe eines SVG zu ändern, können Sie den SVG-Code direkt ändern, indem Sie die SVG-Datei in einem Texteditor öffnen. Der Code könnte wie folgt aussehen:

    /* Weiterer Code wird fortgesetzt */

Sie können feststellen, dass es einige XML-Tags wie path, circle, polygon, etc. gibt. Dort können Sie Ihre eigene Farbe mit Hilfe des style-Attributs hinzufügen. Schauen Sie sich das folgende Beispiel an

Fügen Sie das style-Attribut zu allen Tags hinzu, damit Sie Ihr SVG in der gewünschten Farbe erhalten können.

Wie Daniels Kommentar besagt, können wir das fill-Attribut direkt verwenden, anstatt das fill-Element innerhalb des style-Attributs zu verwenden.

Answer 3

Wenn Sie die Farbe dynamisch ändern möchten:

1. Öffnen Sie das SVG in einem Code-Editor

2. Fügen Sie den Attribut fill oder schreiben Sie es neu für jeden path zu fill="currentColor"

3. Jetzt nimmt das SVG die Farbe Ihrer Schriftfarbe an, sodass Sie etwas wie folgt tun können:

   svg {
       color : "red";
   }

Answer 4

Sie können die Farbe eines Bildes nicht auf diese Weise ändern. Wenn Sie SVG als Bild laden, können Sie nicht ändern, wie es im Browser mit CSS oder JavaScript angezeigt wird.

Wenn Sie Ihr SVG-Bild ändern möchten, müssen Sie es mit , `</code> oder inline mit <code><svg></code> laden.</p> <p>Wenn Sie die Techniken auf der Seite verwenden möchten, benötigen Sie die <a href="https://de.wikipedia.org/wiki/Modernizr" rel="noreferrer">Modernizr</a>-Bibliothek, mit der Sie die SVG-Unterstützung überprüfen und bedingt ein Ersatzbild anzeigen können. Anschließend können Sie Ihr SVG inline einfügen und die benötigten Styles anwenden.</p> <p>Sehen Sie:</p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#time-3-icon { fill: green; } .my-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206 C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161 C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505 c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25,11.192-25-25c0-9.832,14.79-104.675,21.618-143.081 c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/> </svg> <image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" /></code></pre> </div> </div> </p> <p>Sie können Ihr SVG inline einfügen. Kennzeichnen Sie Ihr Ersatzbild mit einem Klassennamen (<code>my-svg-alternate</code>):</p> <pre><code><svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="time-3-icon" .../> </svg> <image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" /> </code></pre> <p>Und im CSS verwenden Sie die Klasse <code>no-svg</code> von Modernizr (CDN: <a href="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js" rel="noreferrer">http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js</a> ), um die SVG-Unterstützung zu überprüfen. Wenn keine SVG-Unterstützung vorhanden ist, wird der SVG-Block ignoriert und das Bild angezeigt, andernfalls wird das Bild aus dem DOM-Baum entfernt (<code>display: none</code>):</p> <pre><code>.my-svg-alternate { display: none; } .no-svg .my-svg-alternate { display: block; width: 100px; height: 100px; background-image: url(image.png); } </code></pre> <p>Dann können Sie die Farbe Ihres eingefügten Elements ändern:</p> <pre><code>#time-3-icon { fill: green; } </code></pre></x-turndown>`

Answer 5

Nur SVG mit Pfadinformationen. Du kannst das nicht mit dem Bild machen ... da du den Pfad ändern kannst, um Strich- und Füllinformationen zu ändern und damit fertig bist. _wie Adobe Illustrator_

Also kannst du via CSS den Pfad fill Wert überschreiben:

path { fill: orange; }

Aber wenn du eine flexiblere Möglichkeit möchtest, um es mit einem Text zu ändern, wenn ein Hover-Effekt stattfindet, verwende:

path { fill: currentColor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}

  TEXTE MIT SVG