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

Verwenden Sie zunächst ein IMG-Tag in Ihrem HTML-Code, um eine SVG-Grafik einzubetten. Ich habe Adobe Illustrator verwendet, um die Grafik zu erstellen.

<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>

Dies ist genau so, wie Sie ein normales Bild einbetten würden. Beachten Sie, dass Sie dem IMG die Klasse svg zuweisen müssen. Die Klasse "social-link" dient nur als Beispiel. Die ID ist nicht erforderlich, aber nützlich.

Verwenden Sie dann diesen jQuery-Code (in einer separaten Datei oder inline im HEAD).

    /**
     * Replace all SVG images with inline SVG
     */
        jQuery('img.svg').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

Der obige Code sucht nach allen IMGs mit der Klasse "svg" und ersetzt sie durch die Inline-SVGs aus der verlinkten Datei. Der große Vorteil ist, dass es Ihnen erlaubt, CSS zu verwenden, um die Farbe der SVG jetzt, wie so zu ändern:

svg:hover path {
    fill: red;
}

Der jQuery-Code, den ich geschrieben habe, lässt sich auch auf die ID und die Klassen der Originalbilder übertragen. Also funktioniert auch dieses CSS:

#facebook-logo:hover path {
    fill: red;
}

Oder:

.social-link:hover path {
    fill: red;
}

Ein Beispiel dafür, wie es funktioniert, sehen Sie hier: http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html

Wir haben hier eine kompliziertere Version, die Caching beinhaltet: https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90

Answer 2

Stil

svg path {
    fill: #000;
}

Drehbuch

$(document).ready(function() {
    $('img[src$=".svg"]').each(function() {
        var $img = jQuery(this);
        var imgURL = $img.attr('src');
        var attributes = $img.prop("attributes");

        $.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Remove any invalid XML tags
            $svg = $svg.removeAttr('xmlns:a');

            // Loop through IMG attributes and apply on SVG
            $.each(attributes, function() {
                $svg.attr(this.name, this.value);
            });

            // Replace IMG with SVG
            $img.replaceWith($svg);
        }, 'xml');
    });
});

Answer 3

Sie können nun die CSS filter Eigenschaft in die meisten modernen Browser (einschließlich Edge, aber nicht IE11). Es funktioniert sowohl mit SVG-Bildern als auch mit anderen Elementen. Sie können verwenden hue-rotate o invert um Farben zu ändern, obwohl sie es nicht zulassen, dass man verschiedene Farben unabhängig voneinander ändern kann. Ich verwende die folgende CSS-Klasse, um eine "deaktivierte" Version eines Symbols anzuzeigen (wobei das Original ein SVG-Bild mit gesättigter Farbe ist):

.disabled {
    opacity: 0.4;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

Dadurch wird es in den meisten Browsern hellgrau. Im IE (und wahrscheinlich auch im Opera Mini, den ich nicht getestet habe) wird es durch die Deckkraft-Eigenschaft merklich verblasst, was immer noch ziemlich gut aussieht, obwohl es nicht grau ist.

Hier ist ein Beispiel mit vier verschiedenen CSS-Klassen für die Twemoji Klingelsymbol: Original (gelb), die oben genannte Klasse "deaktiviert", hue-rotate (grün), und invert (blau).

.twa-bell {
  background-image: url("https://twemoji.maxcdn.com/svg/1f514.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em;
}
.grey-out {
  opacity: 0.4;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.hue-rotate {
  filter: hue-rotate(90deg);
  -webkit-filter: hue-rotate(90deg);
}
.invert {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <span class="twa-bell"></span>
  <span class="twa-bell grey-out"></span>
  <span class="twa-bell hue-rotate"></span>
  <span class="twa-bell invert"></span>
</body>

</html>

Answer 4

Alternativ können Sie auch CSS verwenden mask gewährt ブラウザサポート ist nicht gut, aber Sie könnten eine Ausweichlösung verwenden

.frame {
    background: blue;
    -webkit-mask: url(image.svg) center / contain no-repeat;
}

Answer 5

Wenn Sie Dateien in Ihre Seite einfügen können (PHP-Include oder Include über das CMS Ihrer Wahl), können Sie den SVG-Code hinzufügen und in Ihre Seite einfügen. Dies funktioniert genauso wie das Einfügen des SVG-Quellcodes in die Seite, macht das Seitenlayout aber sauberer.

Der Vorteil ist, dass Sie Teile Ihrer SVG über CSS für Hover anvisieren können - kein Javascript erforderlich.

http://codepen.io/chriscoyier/pen/evcBu

Sie müssen nur eine CSS-Regel wie diese verwenden:

#pathidorclass:hover { fill: #303 !important; }

Beachten Sie, dass die !important Bit ist notwendig, um die Füllfarbe zu überschreiben.