Modifier la couleur de remplissage SVG lorsqu’elle est utilisée comme image de fond

Question

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:

path.mystar {
    fill: blue;
}​

path.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 externe fichier 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="#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>

Answer 1

Je pense que la seule façon pour vous de faire cela est de votre serveur svg à partir d'un certain genre de solution côté serveur. 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 le plein de la largeur et de la 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.

Answer 2

Maintenant, vous pouvez réaliser ceci du 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!

Answer 3

Téléchargez votre svg sous forme de texte.

Modifiez votre texte svg en utilisant javascript pour changer les couleurs de peinture / contour / remplissage [s].

Intégrez ensuite la chaîne svg modifiée inline dans votre css, comme décrit ici .