[解決済み] 背景画像として提供されるSVGイメージの塗りつぶし色を変更するには？

質問

SVG出力をページコードと直接インラインに配置することで、CSSで塗りつぶしの色を簡単に変更することができます。

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

しかし、SVGがBACKGROUND-IMAGEとして提供されているときに、その"fill"属性を変更する方法を探しています。

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

今、色を変えるにはどうしたらいいのでしょうか？ 可能なのでしょうか？

参考までに、私の外部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>

解決方法は？

似たようなことが必要で、CSSにこだわりたかった。ここでは、プレーンなCSSだけでなく、LESSやSCSSのミキシンを紹介します。残念ながら、ブラウザのサポートが少し甘いです。ブラウザサポートの詳細は下記をご覧ください。

LESSのミキシンです。

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

LESSの使い方。

.element-color(#fff);

SCSS mixinです。

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

SCSSの使い方。

@include element-color(#fff);

CSSです。

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

詳細はこちら SVGの完全なコードをCSSファイルに埋め込むことについて。また、ブラウザの互換性についても言及されていますが、これについてはちょっと小さすぎますね。