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

Um auf die Antwort von @gringo näher einzugehen, funktioniert die in anderen Antworten beschriebene Javascript-Methode, erfordert jedoch, dass der Benutzer unnötige Bilddateien herunterlädt und meiner Meinung nach Ihren Code aufbläht.

Ich denke, ein besserer Ansatz wäre es, alle 1-Farb-Vektorgrafiken in eine Webfont-Datei zu migrieren. Ich habe in der Vergangenheit Fort Awesome verwendet, und es funktioniert großartig, um Ihre benutzerdefinierten Symbole/Bilder im SVG-Format zusammen mit allen Drittanbieter-Symbolen, die Sie verwenden (Font Awesome, Bootstrap-Symbole usw.), in eine einzelne Webfont-Datei zu kombinieren, die der Benutzer herunterladen muss. Sie können es auch anpassen, sodass Sie nur die Drittanbieter-Symbole einbeziehen, die Sie verwenden. Dies reduziert die Anzahl der Anfragen, die die Seite machen muss, und das Gesamtgewicht Ihrer Seite, insbesondere, wenn Sie bereits Drittanbieter-Symbolbibliotheken einbeziehen.

Wenn Sie eine mehr Entwicklungsorientierte Option bevorzugen, könnten Sie "npm svg webfont" googlen und eines der Node-Module verwenden, das für Ihre Umgebung am besten geeignet ist.

Nachdem Sie eine dieser beiden Optionen ausgeführt haben, können Sie die Farbe problemlos über CSS ändern und höchstwahrscheinlich haben Sie dabei auch Ihre Website beschleunigt.

Answer 2

Das Hauptproblem in Ihrem Fall besteht darin, dass Sie das SVG von einem -Tag importieren, was die SVG-Struktur versteckt.

Sie müssen das -Tag in Verbindung mit dem -Tag verwenden, um den gewünschten Effekt zu erzielen. Um dies zum Laufen zu bringen, müssen Sie dem Pfad, den Sie in der SVG-Datei verwenden möchten, eine id geben , um sie dann aus dem -Tag abrufen zu können. Versuchen Sie das unten stehende Snippet.

.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: .5s;
  fill: currentColor;
  stroke-width: 5;
  }
  .icon:hover {
    fill: rgba(255,255,255,0);
    stroke: black;
    stroke-width: 2;
    }

.red {
  color: red;
  }

.blue {
  color: blue;
  }

Beachten Sie, dass Sie vor dem Fragment # eine beliebige URL einfügen können, wenn Sie das SVG von einer externen Quelle laden möchten (und nicht in Ihr HTML einbetten). Außerdem geben Sie normalerweise nicht die Füllung im CSS an. Es ist besser zu erwägen, fill:"currentColor" innerhalb des SVG selbst zu verwenden. Der entsprechende CSS-Farbwert des Elements wird dann verwendet.

Answer 3

Der Grund, warum Ihr CSS hier keine Wirkung zeigt, ist, dass Sie die Inneren des in das img-Tag eingebetteten SVG nicht kontrollieren können (wie Sie in diesem oder diesem Artikel nachlesen können).

Es gibt mehrere Lösungen dafür:

a) SVGs mit dem svg-Tag einbetten

Am einfachsten
SVGs nicht wiederverwendbar (höchstens wiederverwendbar pro HTML-Datei durch Implementierung dieses)

svg {
    height: 200px;
    width: 200px;
    fill: red;
}

        Dokument

b) Verwenden Sie ein Skript, um diese img-Tags in svg-Tags zu transformieren

Sie müssten Ihren Code nicht ändern + Wiederverwendbarkeit
Nicht sehr effizient und leistungsfähig, da der Client hier die JavaScript Fetch API verwendet, um die originale SVG-Datei nach der Bereitstellung der Webseite anzufordern

Markieren Sie alle img-Tags, die SVGs anzeigen, mit der Klasse svg-img und verwenden Sie JavaScript, um sie in svg-Tags umzuwandeln, die von Ihrem (Tailwind) CSS gestylt werden können.

Hinweis: Wenn Sie dies lokal testen, sollten Sie die VSCode-Erweiterung "Live Server" installieren und unten in der Symbolleiste auf das Symbol "Go Live" klicken, um die Dateien im Arbeitsverzeichnis auf einem lokalen Entwicklungsserver bereitzustellen. Andernfalls wird der fetch() einen CORS-Fehler verursachen: Der Zugriff auf die Ressource unter 'file:///.../icon-facebook.svg' wurde aufgrund der CORS-Richtlinie vom Ursprung 'null' blockiert: ....

index.html-Datei:

        Dokument

transform-svg-imgs.js-Datei:

window.onload = () => {
    // Finde alle  Elemente mit der Klasse "img-svg"
    const imgSVGs = document.querySelectorAll("img.img-svg");

    // Gehe durch jedes  Element
    imgSVGs.forEach((img) => {

        // Fordere die SVG-Datei an
        fetch(img.getAttribute("src"))
            .then(response => response.text())
            .then(svgContent => {
                // Parsen der XML-Daten aus der SVG-Datei in ein DOM-Objekt zur einfacheren Auswertung
                const parser = new DOMParser();
                const svgXML = parser.parseFromString(svgContent, 'text/xml');

                // Erstellen eines neuen -Elements
                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

                // Kopiere Attribute von  nach  und entferne das "img-svg" Marker
                svg.setAttribute("class", img.getAttribute("class"));
                svg.classList.remove("img-svg");
                svg.setAttribute("alt", img.getAttribute("alt"));

                // Kopiere Daten aus der SVG-Datei zum -Element
                svg.setAttribute("viewBox", svgXML.getElementsByTagName("svg")[0].getAttribute("viewBox"));
                const path = svgXML.getElementsByTagName("svg")[0].querySelector("path");
                svg.appendChild(path);

                // Ersetze  durch 
                img.replaceWith(svg);
            })
            .catch(error => { console.log("Fehler beim Abrufen von SVG: ", error); });

    });
};

icon-facebook.svg-Datei:

c) Verwenden Sie einen Workaround, wie

• das SVG als Hintergrundbild setzen
• CSS-Filter anwenden, wie diese Antwort vorschlägt
• das SVG als Maske verwenden, wie diese Antwort vorschlägt

Answer 4

Öffnen Sie das SVG-Symbol in Ihrem Code-Editor und fügen Sie nach dem Pfad-Tag eine Klasse hinzu:

`

Sie können der SVG-Klasse hinzufügen und die Farbe wie folgt ändern:

codepen

`

Answer 5

Wissen Sie, dass dies eine alte Frage ist, aber vor kurzem sind wir auf das gleiche Problem gestoßen, und wir haben es von der Serverseite aus gelöst. Dies ist eine spezifische Antwort auf PHP, aber ich bin sicher, dass andere Umgebungen etwas ähnliches haben. statt das img-Tag zu verwenden, rendern Sie das svg von Anfang an als svg.

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

Jetzt erhalten Sie beim Rendern der Datei ein vollständiges Inline-SVG.