Wie ändert man die Farbe eines SVG-Bildes mit CSS (jQuery SVG-Bildersatz)?

Question

Dies ist eine Selbstbefragung zu einem praktischen Code, den ich mir ausgedacht habe.

Derzeit gibt es keine einfache Möglichkeit, ein SVG-Bild einzubetten und dann per CSS auf die SVG-Elemente zuzugreifen. Es gibt verschiedene Methoden zur Verwendung von JS-SVG-Frameworks, aber sie sind übermäßig kompliziert, wenn Sie nur ein einfaches Symbol mit einem Rollover-Status erstellen wollen.

Ich habe mir also folgendes ausgedacht, das meiner Meinung nach die bei weitem einfachste Möglichkeit ist, SVG-Dateien auf einer Website zu verwenden. Das Konzept stammt von den frühen Text-zu-Bild-Ersetzungsmethoden, aber soweit ich weiß, wurde es noch nie für SVGs verwendet.

Das ist die Frage:

Wie kann ich ein SVG einbetten und seine Farbe in CSS ändern, ohne ein JS-SVG-Framework zu verwenden?

Answer 1

Die gewählte Lösung ist in Ordnung, wenn Sie möchten, dass jQuery alle svg-Elemente in Ihrem DOM verarbeitet und Ihr DOM eine angemessene Größe hat. Wenn Ihr DOM jedoch sehr groß ist und Sie beschließen, Teile Ihres DOM dynamisch zu laden, macht es wirklich keinen Sinn, das gesamte DOM neu zu scannen, nur um svg-Elemente zu aktualisieren. Verwenden Sie stattdessen ein jQuery-Plugin, um dies zu tun:

/**
 * A jQuery plugin that loads an svg file and replaces the jQuery object with its contents.
 *
 * The path to the svg file is specified in the src attribute (which normally does not exist for an svg element).
 *
 * The width, height and class attributes in the loaded svg will be replaced by those that exist in the jQuery object's
 * underlying html. Note: All other attributes in the original element are lost including the style attribute. Place
 * any styles in a style class instead.
 */
(function ($) {
    $.fn.svgLoader = function () {
        var src = $(this).attr("src");
        var width = this.attr("width");
        var height = this.attr("height");
        var cls = this.attr("class");
        var ctx = $(this);

        // Get the svg file and replace the <svg> element.
        $.ajax({
            url: src,
            cache: false
        }).done(function (html) {
            let svg = $(html);
            svg.attr("width", width);
            svg.attr("height", height);
            svg.attr("class", cls);
            var newHtml = $('<a></a>').append(svg.clone()).html();
            ctx.replaceWith(newHtml);
        });

        return this;
    };

}(jQuery));

Geben Sie in Ihrer HTML-Datei ein svg-Element wie folgt an:

<svg src="images/someSvgFile.svg" height="45" width="45" class="mySVGClass"/>

Und wenden Sie das Plugin an:

$(".mySVGClass").svgLoader();

Answer 2

Für :hover-Ereignisanimationen können wir die Stile in der svg-Datei belassen, wie eine

<svg xmlns="http://www.w3.org/2000/svg">
<defs>
  <style>
  rect {
    fill:rgb(165,225,75);
    stroke:none;
    transition: 550ms ease-in-out;
    transform-origin:125px 125px;
  }
  rect:hover {
    fill:rgb(75,165,225);
    transform:rotate(360deg);
  }
  </style>
</defs>
  <rect x='50' y='50' width='150' height='150'/>
</svg>

Prüfen Sie dies auf svgshare

Answer 3

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(3,122,247)' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

chnage color : fill='rgb(3,122,247)'