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

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

Answer 2

Wenn dasselbe SVG mehrmals mit unterschiedlichen Farben verwendet werden muss, definieren Sie den Satz von Pfaden innerhalb eines versteckten SVG, das als Masterkopie dient. Platzieren Sie dann neue Instanzen, die auf den Masterpfad mit ihren individuellen Füllungen verweisen.

Hinweis: Dieser Ansatz funktioniert nur mit inline Tags. Es funktioniert nicht mit Tags, die .svg Dateien laden.

:root {
  fill: gray;
}

.hidden {
  display: none;
}

svg {
  width: 1em;
  height: 1em;
}

Answer 3

Hier der schnelle und rasante Weg :)

body {
    background-color: #DEFF05;
}

svg {
    width: 30%;
    height: auto;
}

svg path {
    color: red;
    fill: currentcolor;
}

Answer 4

Zum Beispiel in Ihrem HTML:

Verwenden Sie jQuery:

$("#struct1").css("fill", "");

Answer 5

Schau dir diesen Code an. Es funktioniert.

CSS

svg {
   fill: white;
}