SVG Farbe mit CSS ändern

In einem meiner Projekte musste ich vor kurzem .svg-Elemente je nach Kategorie des jeweiligen Blog-Eintrags anders einfärben. Hier ein kurzes Tutorial wie ich das relativ einfach geschafft habe:

Inline SVG

Zuerst muss gesagt werden, dass Manipulationen, egal welcher Art, an SVG mittels CSS nur bei Inline SVG möglich ist. Um dies zu erreichen gibt es mehrere Möglichkeiten, hier 2 davon:

  • (Adobe Illustrator) Inline Code gleich beim rausspielen der SVG-Datei erzeugen und direkt verwenden:
    bildschirmfoto-2016-09-30-um-13-16-04
    (einfach unter Speichern unter -> SVG -> SVG-Code…) Der Code kann dann direkt in die HTML-Datei eingebaut werden. Nachteil an dem Ganzen: die Übersichtlichkeit im Code geht verloren.
  • kleines jQuery Snippet, welches alle SVG-Dateien (die in img-Tags verwendet werden) automatisch in Inline SVG umwandelt:
    /* SVG-Images mit inline SVG austauschen */
    jQuery('img[src$=".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) {
            var $svg = jQuery(data).find('svg');
            if (typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID );
            }
            if (typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }
            $svg = $svg.removeAttr('xmlns:a');
            $img.replaceWith($svg);
        }, 'xml');    
    });

    Vorteil der jQuery-Variante ist sicher die Übersicht im Code.

Somit ist die Vorarbeit abgeschlossen, will man jetzt die Farben einer SVG Grafik dynamisch ändern ist nur noch ein wenig CSS nötig.

Beispiel:

Im folgenden CSS habe ich immer das gleiche File verwendet nur ist jedem eine andere CSS Klasse zugeteilt und somit die SVG Farbe verändert.

Version Schwarz

(ohne CSS)

 

svg Schwarz
Ursprüngliches SVG (schwarz)

Version Rot

.svg-red path {
    fill: red;
}
svg Rot
Ursprüngliches SVG (andere CSS Klasse)

Hover Bunt

Bei genauerem hinsehen, kann man erkennen, dass jedes Zeichen einen eigenen Path hat, darum ist auch dies möglich:

.svg-bunt path:first-of-type {
 fill: red;
} 
.svg-bunt:hover path:first-of-type {
 fill:green; 
}
.svg-bunt path:nth-of-type(2) {
 fill: green; 
}
.svg-bunt:hover path:nth-of-type(2) {
 fill: blue; 
}
.svg-bunt path:nth-of-type(3) {
 fill: blue; 
}
.svg-bunt:hover path:nth-of-type(3) {
 fill: yellow; 
}
.svg-bunt path:nth-of-type(4) {
 fill: yellow; 
}
.svg-bunt:hover path:nth-of-type(4) {
 fill: orange; 
}
svg Bunt
SVG-Bunt (mit Mouseover)

Soweit so gut, zum Ende noch ein praktischer Tipp für MAC – User:
Will man den SVG-Support (bzw. diverse Fallback Mechanismen wie z.B. den hier beschriebenen) unter MAC testen, kann man sich nun Abhilfe schaffen. Microsoft bietet auf deren Website nun einige Images von Virtuellen Maschinen mit alten IEs installiert an.

In diesem Sinne -> fröhliches Schaffen

Facebook
Google+
http://www.stefan-rammer.at/2016/09/30/svg-farbe-mit-css-aendern/
Twitter
RSS
Follow by Email

Stefan

Webdeveloper, Wordpress, PHP, MYSQL

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.