Modifier SVG couleur de fond lorsque vous être servi en tant que Background-Image

De placer la sortie SVG directement en ligne avec le code de la page que je suis en mesure de simplement modifier les couleurs de remplissage avec du CSS comme ceci:

polygon.mystar {
    fill: blue;
}

circle.mycircle {
    fill: green;
}

Cela fonctionne très bien, cependant je suis à la recherche d'un moyen de modifier le "remplir" attribut d'un SVG lorsqu'il est servi en tant que BACKGROUND-IMAGE.

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

Comment puis-je changer les couleurs maintenant? Est-il même possible?

Pour référence, voici le contenu de mon externes SVG fichier:

<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>

Je me fais frapper jusqu'souvent avec des accessoires pour ma réponse. Vous devriez envisager de changer pour la accepté de répondre il n'est donc pas manqué.

InformationsquelleAutor Joe | 2012-11-13

58

Une façon de le faire est au service de vos svg à partir de quelque côté serveur mécanisme.
Il suffit de créer un serveur de ressources secondaires que les sorties de votre svg selon les paramètres GET, et vous le servir sur une url spécifique.

Alors vous utilisez cette url dans votre css.

Parce que, comme un arrière-plan img, il ne fait pas partie du DOM et vous ne pouvez pas le manipuler.
Une autre possibilité serait de l'utiliser régulièrement, l'incorporer dans une page d'une manière normale, mais la position absolument, faire toute la largeur, & hauteur de la page, et ensuite utiliser z-index propriété css pour le mettre derrière tous les autres éléments du DOM sur une page.
- N'oubliez pas si vous vous servez de la SVG à partir d'un script côté serveur, afin de vous assurez également envoyer le bon en-tête MIME. En PHP, ce serait: <?php header('Content-type: image/svg+xml'); ?>
- Vous pouvez utiliser le svg image de masque et de manipuler la couleur d'arrière-plan de l'élément. Cela aura le même effet que la modification du remplissage. (réponse détaillée fournie)
- Cette réponse a été grande à compter de 2012, mais maintenant, CSS masques et/ou des filtres ont été pris en charge dans tous les navigateurs pendant un certain temps. Je recommande à tous ceux qui lisent ceci maintenant, vérifiez les liens dans widged la réponse ci-dessous ou tout simplement passer à la CSS Masques ici, qui est une solution très facile -- note-il encore nécessite 2 version de la règle, un avec -webkit - prefix à l'heure actuelle. Pour Microsoft Bord, actuellement filtres CSS sont pris en charge, mais pas encore des masques.
- Il existe de nombreuses solutions de fournir soufflet que le travail aujourd'hui, j'accepte cette réponse ne correspond plus à l'état actuel de possibilités.
InformationsquelleAutor tonino.j
116

J'ai besoin de quelque chose de similaire et je voulais rester avec les CSS. Ici sont MOINS et SCSS mixin ainsi que simple CSS qui peut vous aider avec ceci. Malheureusement, c'est de la prise en charge du navigateur est un peu laxiste. Voir ci-dessous pour plus de détails sur la prise en charge du navigateur.

MOINS mixin:
```
.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}
```
MOINS d'utilisation:
```
.element-color(#fff);
```
SCSS mixin:
```
@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}
```
SCSS utilisation:
```
@include element-color(#fff);
```
CSS:
```
// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');
```
Voici plus d'infos sur l'incorporation de la totalité SVG code dans votre fichier CSS. Il a également mentionné la compatibilité du navigateur, qui est un peu trop petite pour que ce soit une option viable.
- Bien qu'il y a un peu de surcharge, parce que j'ai codé en dur à tous les éléments svg, je pense que c'est la meilleure solution pour un certain temps. Merci
- Vous devez utiliser un préprocesseur CSS comme Sass ou Moins si vous voulez utiliser de cette manière. Si vous n'utilisez pas celui que vous aurez juste besoin d'utiliser cette image de fond d'écran de la ligne pour chaque couleur
- Notez que vous devez urlencode la # caractère de votre hex couleurs pour faire ce travail dans Firefox. Donc, quelque chose comme <svg fill="#ffffff" ...></svg> devient <svg fill="%23ffffff" ...></svg>.
- Sweet méthode. Avez-vous dur à coder le svg dans l'image de fond d'écran comme ça? Ne pouvez-vous pas juste un lien vers une certaine façon?
- Je n'ai pas explorer cette option. Je suppose avec une gorgée de tâche vous pouvez importer à partir d'un autre fichier, mais je ne suis pas sûr si vous pouviez le faire de façon dynamique. Vous devriez essayer si! Peut être doux.
- Un peu en retard à la fête, mais comment voulez-vous faire avec SASS?
- SASS et SCSS fichiers pouvez importer les uns des autres, de sorte que le SCSS exemple devrait être valable pour SASS, trop.
- Le problème avec cette méthode est que vous manquez cache du navigateur.
InformationsquelleAutor Ryan
48

Encore une autre approche consiste à utiliser un masque. Ensuite, vous modifiez la couleur d'arrière-plan de l'élément masqué. Cela a le même effet que la modification de l'attribut de suffisance du 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;
}
```
Vous trouverez un tutoriel complet ici: http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images (pas le mien). Il vous propose une variété d'approches (non limitée à un masque).
- Une chose à noter sur ce est la prise en charge du navigateur. Je crois que IE (comme d'habitude) est en retard sur ce point.
- Malheureusement mask est pas pris en charge par IE ni Edge: caniuse.com/#search=mask
- Ni Firefox. developer.mozilla.org/en/docs/Web/CSS/mask-image
- Pas de travail pour moi en Chrome soit. Edit: Oh nvm... je n'ai pas autoprefixer activé. Je pensais que les vendeurs étaient censés cesser d'utiliser les préfixes?!
- Ne fonctionne pas sur IE 11 (11.608.15063.0)
- Travaille dans le dernier chrome et firefox
InformationsquelleAutor widged
47

Vous pouvez utiliser les CSS des masques, Avec le 'masque' de la propriété, vous créez un masque est appliqué à un élément.
```
.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}
```
Pour plus d'informations, voir cet excellent article: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
- c'est bon, mais lorsqu'il est appliqué à une icône dans un champ de saisie de tous les commentaires de texte est caché.
- Pas pris en charge dans IE
- Super cool réponse, mais vous ne pouvez plus utiliser la couleur d'arrière-plan en vol stationnaire ou quelque chose comme ça
- Cela semble être à peine soutenue, si trop d'utilisateurs ne serait pas en mesure de voir ça, pour être viable, aujourd'hui, à la fin de 2018. caniuse.com/#feat=css-masks
InformationsquelleAutor Adel

C'est possible avec Sass!
La seule chose que vous avez à faire est d'encoder votre code svg. Et cela est possible avec une fonction d'assistance dans le Sass. J'ai fait un codepen pour cela. Regardez ceci:

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>');
}

Cela fonctionne très bien. Seul problème: Dans IE10 l'icône est trop petit (je pense que 10% de la taille donnée.

InformationsquelleAutor Philipp Kühn

9

Télécharger votre svg en tant que texte.

Modifier votre svg texte à l'aide de javascript pour changer la peinture/avc/remplir de la couleur[s].

Puis incorporer la modification de la chaîne svg inline dans votre css comme décrit ici.

InformationsquelleAutor jedierikb

Maintenant vous pouvez l'obtenir sur le côté client comme ceci:

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+")";

Violon ici!

Vous devez éviter l'utilisation de Base64 pour SVG comme il est inutile, rend vos fichiers plus gros et empêche même GZIP de efficacement ces morceaux de code.
Ce codage se passe sur le côté client, probablement un peu approfondie pour s'échapper...

InformationsquelleAutor tnt-rox

Vous pouvez stocker le SVG dans une variable. Ensuite manipuler la chaîne SVG en fonction de vos besoins (c'est à dire, définissez la largeur, la hauteur, la couleur, etc). Puis utiliser le résultat pour définir l'arrière-plan, par exemple

$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)}');
}
}

J'ai fait une démo aussi, http://sassmeister.com/gist/4cf0265c5d0143a9e734.

Ce code fait quelques hypothèses sur le SVG, par exemple, que <svg /> élément n'a pas de couleur de remplissage et que ni la largeur ou la hauteur propriétés sont définies. Depuis l'entrée est codé en dur dans le SCSS document, il est assez facile à faire respecter ces contraintes.

Ne vous inquiétez pas au sujet de la duplication de code. gzip la compression qui fait la différence négligeable.

InformationsquelleAutor 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 article et de démonstration

Cette méthode permettra d'appliquer un filtre à un objet entier, y compris les enfants.
Et largement pris en charge! caniuse.com/#feat=css-filters

InformationsquelleAutor Elbaz

Vous pouvez créer votre propre SCSS de la fonction pour cela. En ajoutant les lignes suivantes à votre fichier de configuration.rb fichier.

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

Alors vous pouvez l'utiliser dans votre CSS:

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

Vous devrez modifier vos fichiers SVG et remplacez tous les attributs de remplissage dans le balisage avec fill="{couleur}"

Le chemin d'icône est toujours par rapport à votre images_dir paramètre dans la même config.rb fichier.

À l'instar de certaines autres solutions, mais c'est assez propre et conserve vos fichiers SCSS bien rangé!

c'est à partir d'un github-numéro. Juste référence ici au cas où quelqu'un veut lire la discussion là-bas

InformationsquelleAutor Lomax

Tard pour le montrer ici, MAIS, j'ai pu ajouter une couleur de remplissage à l'SVG polygone, si vous êtes en mesure de modifier directement le code SVG, donc les suivantes, par exemple svg rend rouge au lieu de noir par défaut. Je n'ai pas testé en dehors de Chrome si:

<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>

InformationsquelleAutor Eleanor Zimmermann

1

Dans certains (très spécifique) des situations, cela peut être réalisé en utilisant un filtre. Par exemple, vous pouvez modifier un bleu SVG image de violet par la rotation de la teinte de 45 degrés à l'aide de filter: hue-rotate(45deg);. Prise en charge du navigateur est minime, mais c'est encore une technique intéressante.

Démo

InformationsquelleAutor Michaël van de Weerd
-2

C'est ma méthode préférée, mais votre navigateur doit être très progressive. Avec le masque de la propriété vous créez un masque est appliqué à un élément. Partout où le masque est opaque, ou solide, l'image sous-jacente montre à travers. Lorsqu'il est transparent, l'image sous-jacente est masquée, ou cachés. La syntaxe du CSS masque d'image est similaire à l'image de fond d'écran.regardez les codepenmask

InformationsquelleAutor Mebin Benny
-3

Beaucoup de si, mais si votre pré codées en base64 SVG commence:
```
<svg fill="#000000
```
Puis le base64 chaîne va commencer:
```
PHN2ZyBmaWxsPSIjMDAwMDAw
```
si la pré-codées chaîne commence:
```
<svg fill="#bfa76e
```
ensuite ce code la:
```
PHN2ZyBmaWxsPSIjYmZhNzZl
```
Les deux chaînes codées commencer le même:
```
PHN2ZyBmaWxsPSIj
```
Le caprice de l'encodage base64 est tous les 3 entrée personnages deviennent les 4 caractères de sortie. Avec le SVG de départ comme celui-ci de 6 caractères hexadécimal de la couleur de remplissage commence exactement sur un codage de bloc 'limite'.
Donc, vous pouvez facilement faire un cross-browser JS remplacer:
```
output = input.replace(/MDAwMDAw/, "YmZhNzZl");
```
Mais tnt-rox réponse ci-dessus est le chemin à parcourir aller de l'avant.

InformationsquelleAutor A2D

Vous devez vous connecter pour publier un commentaire.