it-swarm.com.de

Ändern Sie die SVG-Füllfarbe, wenn Sie als Hintergrundbild angezeigt werden

Indem ich die SVG-Ausgabe direkt in den Seitencode einfüge, kann ich Füllfarben mit CSS einfach wie folgt ändern:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

Das funktioniert prima, aber ich suche nach einer Möglichkeit, das "fill" -Attribut einer SVG zu ändern, wenn sie als HINTERGRUNDBILD bereitgestellt wird.

html {      
    background-image: url(../img/bg.svg);
}

Wie kann ich jetzt die Farben ändern? Ist es überhaupt möglich?

Als Referenz sind hier die Inhalte meiner externen SVG-Datei:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>
207
Joe

Eine Möglichkeit, dies zu tun, besteht darin, Ihr SVG von einem serverseitigen Mechanismus aus zu bedienen. Erstellen Sie einfach eine Ressourcenserverseite, die Ihr SVG gemäß den GET-Parametern ausgibt, und Sie stellen es unter einer bestimmten URL bereit.

Dann verwenden Sie einfach diese URL in Ihrem CSS.

Weil es als Hintergrundbild nicht Teil des DOM ist und Sie es nicht manipulieren können. Eine andere Möglichkeit wäre, es regelmäßig zu verwenden, es auf normale Weise in eine Seite einzubetten, es jedoch absolut zu positionieren, es auf die volle Breite und Höhe einer Seite zu bringen und es dann mit der Eigenschaft z-index css hinter alle anderen DOM-Elemente zu setzen auf einer Seite.

64
tonino.j

Ich brauchte etwas Ähnliches und wollte mich an CSS halten. Hier finden Sie WENIGER und SCSS-Mixins sowie einfaches CSS, das Ihnen dabei helfen kann. Leider ist die Browserunterstützung etwas nachlässig. Einzelheiten zur Browserunterstützung finden Sie weiter unten.

WENIGER mixin:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

WENIGER Verbrauch:

.element-color(#fff);

SCSS-Mixin:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS-Nutzung:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

Hier gibt es weitere Informationen zum Einbetten des vollständigen SVG-Codes in Ihre CSS-Datei. Es wurde auch die Browserkompatibilität erwähnt, die etwas zu klein ist, um eine brauchbare Option zu sein.

123
Ryan

Sie können CSS-Masken verwenden. Mit der Eigenschaft 'mask' erstellen Sie eine Maske, die auf ein Element angewendet wird.

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

Weitere Informationen finden Sie in diesem großartigen Artikel: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

57
Adel

Ein weiterer Ansatz ist die Verwendung von Masken. Anschließend ändern Sie die Hintergrundfarbe des maskierten Elements. Dies hat den gleichen Effekt wie das Ändern des Füllattributs von svg.

HTML:

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

CSS:

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

Eine vollständige Anleitung finden Sie hier: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (nicht meine eigene). Es werden verschiedene Ansätze vorgeschlagen (nicht auf Masken beschränkt).

49
widged

Mit Sass ist das möglich! Das einzige, was Sie tun müssen, ist, Ihren SVG-Code per URL zu kodieren. Und das ist mit einer Helferfunktion in Sass möglich. Ich habe einen Codepen dafür gemacht. Schau dir das an:

http://codepen.io/philippkuehn/pen/zGEjxB

// choose a color

$icon-color: #F84830;


// functions to urlencode the svg string

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}


// icon styles
// note the fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}
16
Philipp Kühn

Laden Sie Ihre Svg als Text herunter.

Ändern Sie Ihren SVG-Text mit Javascript, um die Farbe/Strich/Füllfarbe [s] zu ändern.

Betten Sie dann den modifizierten svg-String wie beschrieben in Ihre CSS ein hier .

9
jedierikb

Jetzt können Sie dies auf der Client-Seite wie folgt erreichen:

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

Geige hier!

9
tnt-rox

Sie können die SVG in einer Variablen speichern. Bearbeiten Sie dann die SVG-Zeichenfolge entsprechend Ihren Anforderungen (z. B. Breite, Höhe, Farbe usw.). Verwenden Sie dann das Ergebnis, um den Hintergrund festzulegen, z.

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

Ich habe auch eine Demo gemacht, http://sassmeister.com/Gist/4cf0265c5d0143a9e734 .

Dieser Code macht einige Annahmen über die SVG, z. Das <svg /> -Element hat keine vorhandene Füllfarbe und es sind weder Breiten- noch Höheneigenschaften festgelegt. Da die Eingabe im SCSS-Dokument fest codiert ist, ist es recht einfach, diese Einschränkungen durchzusetzen.

Mach dir keine Sorgen über die Code-Vervielfältigung. gzip Komprimierung macht den Unterschied vernachlässigbar.

7
Gajus
 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

Codeben Artikel und Demo

5
Elbaz

Hierfür können Sie eine eigene SCSS-Funktion erstellen. Fügen Sie Ihrer config.rb-Datei Folgendes hinzu.

require 'sass'
require 'cgi'

module Sass::Script::Functions

  def inline_svg_image(path, fill)
    real_path = File.join(Compass.configuration.images_path, path.value)
    svg = data(real_path)
    svg.gsub! '{color}', fill.value
    encoded_svg = CGI::escape(svg).gsub('+', '%20')
    data_url = "url('data:image/svg+xml;charset=utf-8," + encoded_svg + "')"
    Sass::Script::String.new(data_url)
  end

private

  def data(real_path)
    if File.readable?(real_path)
      File.open(real_path, "rb") {|io| io.read}
    else
      raise Compass::Error, "File not found or cannot be read: #{real_path}"
    end
  end

end

Dann können Sie es in Ihrem CSS verwenden:

.icon {
  background-image: inline-svg-image('icons/icon.svg', '#555');
}

Sie müssen Ihre SVG-Dateien bearbeiten und alle Füllattribute im Markup durch fill = "{color}" ersetzen.

Der Symbolpfad ist immer relativ zu Ihrem Parameter images_dir in derselben Datei config.rb.

Ähnlich wie bei einigen anderen Lösungen, aber dies ist ziemlich sauber und hält Ihre SCSS-Dateien aufgeräumt!

3
Lomax

Spät in der Show hier, ABER, ich konnte dem SVG-Polygon eine Füllfarbe hinzufügen, wenn Sie den SVG-Code direkt bearbeiten können, sodass beispielsweise die folgende Svg rot statt der Standardfarbe schwarz wiedergibt. Ich habe nicht außerhalb von Chrome obwohl getestet:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon 


        fill="red"


        fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>
1

In einigen (sehr spezifischen) Situationen kann dies durch Verwendung eines Filters erreicht werden. Sie können beispielsweise ein blaues SVG-Bild in lila ändern, indem Sie den Farbton mit filter: hue-rotate(45deg); um 45 Grad drehen. Die Browserunterstützung ist minimal, aber immer noch eine interessante Technik.

Demo

für einfarbigen Hintergrund können Sie ein SVG mit einer Maske verwenden, in der die Hintergrundfarbe angezeigt werden soll

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
    <defs>
        <mask id="Mask">
            <rect width="100%" height="100%" fill="#fff" />
            <polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
        </mask>
    </defs>
    <rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>

und dann benutze diese CSS

background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);
1
user8344212