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

Ich schlage vor, Ihre Farbe auszuwählen und zu diesem Stift zu gehen https://codepen.io/sosuke/pen/Pjoqqp es wird HEX in CSS-Filter umwandeln z.B.:#64D7D6

gleich

filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);

der endgültige Auszug

.filterit{
width:270px;
filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
}

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;
}