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

Wenn Sie ein einfarbiges SVG mit unterschiedlichen Deckkraften haben, das Sie einfach in eine andere Farbe einfärben möchten, gibt es einen anderen Ansatz, der verwendet werden kann: der feFlood SVG-Filter.

Diese Lösung ist jedoch nicht so einfach wie eine einzelne CSS-Zeile:

• Es funktioniert bei SVGs innerhalb eines img-Elements.
• Dies erfordert keinerlei Bearbeitung des Quell-SVG.
• Es ermöglicht Ihnen einfach eine Ziel-Farbe für das SVG auszuwählen und sich keine Gedanken über komplexe Farbtransformationen wie hue-rotate zu machen.

Hier ist ein Beispiel:

In dem obigen Beispiel erstellen wir ein Inline-SVG, um die Filter zu definieren, und wenden es dann auf das Bild an. Innerhalb des -Blocks definieren wir zunächst die Füllfarbe, die wir über möchten, und erstellen dann ein zusammengesetztes Bild unter Verwendung des Alphakanals der Quelle und der Flutfarbe. Schließlich wird der Filter über die filter-CSS-Eigenschaft auf dem img-Element auf das gesamte Bild angewendet.

Ich habe diese Technik aus diesem Artikel von Smashing Magasine gelernt. Es ist ein sehr zu empfehlender Artikel, wenn Sie mehr über SVG-Filter erfahren möchten.

Einige zusätzliche Dinge zu beachten:

• Dieser Filter kann auf jedes HTML-Element über die CSS-Eigenschaft filter angewendet werden.
• Derselbe Filter kann mehrmals auf derselben Seite wiederverwendet werden.
• Wenn Sie ein Inline-SVG verwenden, kann der -Block Teil des svg-Elements bilden und der Filter kann immer noch auf das gesamte SVG oder auf ausgewählte Elemente angewendet werden. Dies vermeidet die Notwendigkeit eines separaten SVG-Elements für die Filter.

Answer 2

Eigentlich gibt es eine viel flexiblere Lösung für dieses Problem: das Schreiben eines Webkomponenten, das SVG zur Laufzeit als Text einfügt. Ich habe auch einen Gist mit einem Link zu JSFiddle veröffentlicht.

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

  SVG mit Farbe

    (function () {
      const createSvg = (color = '#ff9933') => `
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="76px" height="22px" viewBox="-0.5 -0.5 76 22">
            <defs/>
              <g>
                <ellipse cx="5" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <ellipse cx="70" cy="10" rx="5" ry="5" fill="#ff9933" stroke="none" pointer-events="all"/>
                <path d="M 9.47 12.24 L 17.24 16.12 Q 25 20 30 13 L 32.5 9.5 Q 35 6 40 9 L 42.5 10.5 Q 45 12 50 6 L 52.5 3 Q 55 0 60.73 3.23 L 66.46 6.46" fill="none" stroke="#ff9933" stroke-miterlimit="10" pointer-events="stroke"/>
              </g>
          </svg>`.split('#ff9933').join(color);

      function SvgWithColor() {
        const div = Reflect.construct(HTMLElement, [], SvgWithColor);
        const color = div.hasAttribute('color') ? div.getAttribute('color') : 'cyan';
        div.innerHTML = createSvg(color);
        return div;
      }

      SvgWithColor.prototype = Object.create(HTMLElement.prototype);
      customElements.define('svg-with-color', SvgWithColor);

      document.body.innerHTML += `<svg-with-color
        color='magenta'
      ></svg-with-color>`;

    })();

Answer 3

Wenn Sie SVG mit path verwenden, färben Sie den Pfad ein:

svg path{
fill:red;
}

Answer 4

Meine Antwort wäre diese. Aber ich bin mir nicht zu 100% sicher, ob es für alle funktioniert:

Wähle 'svg' und dann 'path'. Und dann kannst du 'fill' ändern.

.eye-icon-container {
    width: 33px;
    height: 33px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;

    :hover {
      background-color: #ddf0ff;
    }
    :active {
      background-color: #1d398d;
      svg {
        path {
          fill: #fff;
        }
      }
    }
  }

Answer 5

Sie können ein Schriftsymbol verwenden, um jede CSS-Option in SVG zu verwenden

Ich habe nach einer Möglichkeit gesucht, beliebige CSS-Optionen wie Animation für SVG zu haben, und bin schließlich darauf gestoßen, ein Schriftsymbol mit meinen SVG(s) zu generieren und es dann innerhalb eines _Spans_ zu verwenden (wie Font Awesome), sodass jede CSS-Option, wie Einfärbung, darauf verfügbar war.

Ich habe https://icomoon.io verwendet, um mein SVG-Bild in ein Schriftsymbol umzuwandeln. Dann können Sie es wie Font Awesome oder MaterialIcon innerhalb von HTML-Elementen verwenden.