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

Ändern Sie Ihre SVG-Datei, fügen Sie fill="currentColor" zum svg-Tag hinzu und vergewissern Sie sich, dass Sie jede andere Füllungseigenschaft aus der Datei entfernen.

Zum Beispiel:

...

Beachten Sie, dass currentColor ein Schlüsselwort ist (keine feste Farbe in Benutzung).

Danach können Sie die Farbe mit CSS ändern, indem Sie die color-Eigenschaft des Elements oder seines Elternelements festlegen.

Beispiel:

.div-with-svg-inside {
    color: red;
}

Ich habe vergessen zu sagen, Sie müssen das SVG folgendermaßen einfügen:

Wenn das Bild von einer Variablen kommt, dann

Beachten Sie, dass #img die ID des svg-Tags innerhalb der SVG-Datei ist. Beachten Sie auch, dass xlink:href veraltet ist und stattdessen href verwenden sollten oder beides verwenden können, um ältere Browser-Versionen zu unterstützen.

Ein weiterer Weg, dies zu tun: https://css-tricks.com/cascading-svg-fill-color/

Answer 2

Sie müssen zuerst das SVG in den HTML-DOM einfügen.

Es gibt eine Open-Source-Bibliothek namens SVGInject, die dies für Sie erledigt. Sie verwendet das onload-Attribut, um die Injektion auszulösen.

Hier ist ein minimales Beispiel für die Verwendung von SVGInject:

Nachdem das Bild geladen ist, wird das onload="SVGInject(this) die Injektion auslösen und das -Element durch den Inhalt der SVG-Datei ersetzt, die im src-Attribut angegeben ist.

Es löst mehrere Probleme bei der SVG-Injektion:

1. SVGs können bis zum Abschluss der Injektion ausgeblendet werden. Dies ist wichtig, wenn bereits während des Ladens ein Stil angewendet wird, was sonst zu einem kurzen "unstilisierten Inhaltsflackern" führen würde.

2. Die -Elemente injizieren sich automatisch. Wenn Sie SVGs dynamisch hinzufügen, müssen Sie sich keine Gedanken darüber machen, die Injektionsfunktion erneut aufzurufen.

3. Ein zufälliger String wird zu jeder ID im SVG hinzugefügt, um zu vermeiden, dass dieselbe ID mehrmals im Dokument vorhanden ist, wenn ein SVG mehr als einmal injiziert wird.

SVGInject ist reines Javascript und funktioniert mit allen Browsern, die SVG unterstützen.

Hinweis: Ich bin der Co-Autor von SVGInject

Answer 3

Verwenden Sie Filter, um in jede Farbe zu wandeln.

Ich habe kürzlich diese Lösung gefunden und hoffe, dass jemand sie nutzen kann. Da die Lösung Filter verwendet, kann sie mit jedem Bildtyp verwendet werden. Nicht nur SVG.

Wenn Sie ein Einfarbenbild haben, bei dem Sie nur die Farbe ändern möchten, können Sie dies mithilfe einiger Filter tun. Es funktioniert natürlich auch bei mehrfarbigen Bildern, aber Sie können keine bestimmte Farbe anvisieren. Nur das gesamte Bild.

Die Filter stammen aus dem Skript, das in Wie man Schwarz in jede gewünschte Farbe umwandelt, wobei nur CSS-Filter verwendet werden vorgeschlagen wurde. Wenn Sie Weiß in jede Farbe ändern möchten, können Sie den Invert-Wert in jedem Filter anpassen.

.startAsBlack{
  display: inline-block;
  width: 50px;
  height: 50px;
  background: black;
}

.black-green{
  filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%);
}

.black-red{
  filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%);
}

.black-blue{
  filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%);
}

.black-purple{
  filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%);
}

Schwarz zu jeder Farbe:

Answer 4

Dies Antwort basiert auf Antwort https://stackoverflow.com/a/24933495/3890888, aber mit einer reinen JavaScript-Version des dort verwendeten Skripts.

Du musst das SVG zu einem inline SVG machen. Du kannst dieses Skript verwenden, indem du der Abbildung eine Klasse svg hinzufügst:

/*
 * Ersetze alle SVG-Bilder durch Inline-SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Holen Sie das SVG-Tag, den Rest ignorieren
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Füge die ID des ersetzten Bildes dem neuen SVG hinzu
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Füge die Klassen des ersetzten Bildes dem neuen SVG hinzu
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Entferne alle ungültigen XML-Tags gemäß http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Überprüfe, ob der Viewport festgelegt ist, ohne Viewport wird das SVG nicht skaliert.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Ersetze das Bild durch das neue SVG
        img.parentNode.replaceChild(svg, img);

    });

});

Und dann, jetzt wenn du das tust:

.logo-img path {
  fill: #000;
}

Oder vielleicht:

.logo-img path {
  background-color: #000;
}

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

Answer 5

Einfach...

Sie können diesen Code verwenden:

Spezifizieren Sie zuerst den Pfad der SVG-Datei und schreiben Sie dann deren ID, in diesem Fall "Capa_1". Sie können die ID der SVG-Datei erhalten, indem Sie sie in einem Editor öffnen.

In CSS:

.logo {
  fill: red;
}