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

Für mich sahen meine SVGs anders aus, wenn ich sie als img und svg hatte. Daher konvertiert meine Lösung das img in csv, ändert die Styles intern und zurück zu img (obwohl dies etwas mehr Arbeit erfordert), ich glaube "blob" hat auch eine bessere Kompatibilität als die "mask" in der am meisten hochgewerteten Antwort verwendet wird.

  let img = yourimgs[0];
  if (img.src.includes(".svg")) {
    var ajax = new XMLHttpRequest();
    ajax.open("GET", img.src, true);
    ajax.send();
    ajax.onload = function (e) {

      svg = e.target.responseText;

      svgText = "";
      // Ändern Sie Ihren SVG-String wie gewünscht, zum Beispiel
      // Ersetzen der Hex-Farbe zwischen "{fill:" und ";"
      idx = svg.indexOf("{fill:");
      substr = svg.substr(idx + 6);
      str1 = svg.substr(0, idx + 6);
      str2 = substr.substr(substr.indexOf(";"));
      svgText = str1 + "#ff0000" + str2;

      let blob = new Blob([svgText], { type: "image/svg+xml" });
      let url = URL.createObjectURL(blob);
      let image = document.createElement("img");
      image.src = url;
      image.addEventListener("load", () => URL.revokeObjectURL(url), {
        once: true,
      });
      img.replaceWith(image);
    };
  }

Answer 2

Einfaches JS

Verwenden Sie die folgende kurze Funktion ImgToSvg, die img in svg umwandelt (einschließlich Klassenliste)

const ImgToSvg= async (img) => {
  const s = document.createElement('div');
  s.innerHTML = await (await fetch(img.src)).text();
  s.firstChild.classList = img.classList;
  img.replaceWith(s.firstChild)
}

.logo-img {
  fill: yellow;
}

Dies ist eine Verbesserung der Antwort von Waruyama auf diese Antwort, indem eine kurze js-Funktion bereitgestellt wird

Answer 3

Ich wollte nur bestimmte Pfade und/oder Farben ändern und sogar Pfade unterschiedlich einfärben. In meinem Fall wurde auch etwas CSS direkt auf das IMG-Tag angewendet, daher wollte ich das Original-IMG-Element belassen, um nicht mit der Positionierung und Ausrichtung durcheinander zu kommen.

Dank der Inspiration aus dieser Antwort: https://stackoverflow.com/a/43015413/1444589, hier ist, was für mich funktioniert hat:

let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;

fetch(imgURL)
  .then(response => response.text())
  .then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, 'text/xml');
    let svg = xmlDoc.getElementsByTagName('svg')[0];
    let paths = xmlDoc.getElementsByTagName('path');

    // einzelne Pfad-Elemente direkt ansprechen
    let leftShape = paths[0];
    leftShape.setAttribute('fill', '#4F4F4F');

    // oder spezifische Farbe finden
    const pathsArr = Array.from(paths);
    let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
    skirtShape.setAttribute('fill', '#0078D6');

    // Ersetzen Sie das alte SVG durch coloriertes SVG
    // Positionierung und Ausrichtung bleibt unberührt
    let base64Str = btoa(new XMLSerializer().serializeToString(svg));
    img.src = 'data:image/svg+xml;base64, ' + base64Str;
  });

Answer 4

Warum nicht einfach die Filter-Eigenschaft von CSS verwenden, um die Farbe im :hover oder einem anderen Zustand zu manipulieren? Ich habe festgestellt, dass es über SVG-Bilder in img Tags funktioniert. Zumindest wird es im Jahr 2020 fast vollständig unterstützt. Es scheint mir die einfachste Lösung zu sein. Der einzige Nachteil ist, dass man die Filtereigenschaften anpassen muss, um die Zielfarbe zu finden. Aber dafür gibt es auch dieses sehr nützliche Werkzeug.

Answer 5

Für diese Zwecke müssen Sie Ihr SVG als Inline-HTML verwenden.

Hier ist Ihr Logo.svg-Code (wenn Sie ihn im Texteditor öffnen):

Logo.SVG

Fügen Sie Ihre gewünschte Klasse/ID hinzu (ich habe 'logo-img' hinzugefügt):

Überarbeitetes Svg

    ...

Jetzt wenden Sie Ihre CSS-Regeln an:

CSS

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

Pro

• Auf diese Weise können Sie auf Benutzeraktionen (Hover, Auswählen, ...) reagieren

Kontra

• Ihre HTML-Datei würde unübersichtlich werden.

Hier ist ein Stack-Schnipsel

        body {
            display: flex;
            justify-content: center;
        }
        .logo-img path {
            transition: .5s all linear;
        }
        .logo-img path {
            fill: coral;
        }
        .logo-img:hover path{
            fill: darkblue;
        }

    Dokument