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

Ziele auf den Pfad innerhalb des 'svg'-Tags:

   ....

Du kannst es inline machen, wie:

Oder

svg{
   path{
        fill: #ccc

Answer 2

Sie können versuchen, es mit diesem CSS-Filter-Hack zu färben:

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

.colorize-navy {
  filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);
}

.colorize-blue {
  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);
}

Answer 3

Um die Farbe der SVG-Datei einfach zu ändern:

Gehen Sie zur SVG-Datei und erwähnen Sie unter Styles die Farbe im Füllbereich:

.cls-1{fill: #FFFFFF;}

Answer 4

2022 Web-Komponente Antwort

Diese (7 Zeilen) native Web-Komponente (JSWC) lädt externen Inhalt und fügt ihn in das DOM ein.

Sie wird in meinem DEV-Blog-Beitrag erklärt und dokumentiert: Web-Komponente.

Vollständiger Quellcode:

customElements.define("load-file", class extends HTMLElement {

  // declare default connectedCallback as sync so await can be used
  async connectedCallback(
      // call connectedCallback with parameter to *replace* SVG (of  persists)
      src = this.getAttribute("src"),
    // attach a shadowRoot if none exists (prevents displaying error when moving Nodes)
    // declare as parameter to save 4 Bytes: 'let '
    shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})
  ) {
      // load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML
    shadowRoot.innerHTML = await (await fetch(src)).text()

    // append optional  Elements from inside  after parsed 
    shadowRoot.append(...this.querySelectorAll("[shadowRoot]"))

    // if "replaceWith" attribute
    // then replace  with loaded content 
    // childNodes instead of children to include #textNodes also
    this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes)
  }
})

    svg {
      height: 180px; /* Stack Overflow subwindow height */
    }
    path:nth-child(2n+2) {
      fill: GREEN; /* shadowDOM style does NOT style global DOM */
    }

Answer 5

1. Methode 1

   Der einfache und effektive Weg:

   Öffnen Sie Ihre .svg-Datei mit einem Texteditor

   Geben Sie ein style-Attribut und füllen Sie es mit Farbe.

2. Ein anderer Weg

   Füllen Sie Ihre Form mit Farbe. Hier habe ich rect Form fill="white".

           hintergrund