html css 背景 - SVG塗りつぶしの色をBackground-Imageとして扱うときに変更する

CSSマスクを使うことができます。 'mask'プロパティでは、要素に適用されるマスクを作成します。

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

詳細は、この素晴らしい記事をhttps://codepen.io/noahblon/post/coloring-svgs-in-css-background-images ： https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images : https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

svgをテキストとしてダウンロードします。

javascriptを使ってあなたのsvgテキストを変更して、ペイント/ストローク/塗りつぶしの色を変更してください。

次に、 here説明するように、変更されたsvg文字列をCSSに埋め込みhere 。

変数にSVGを格納することができます。 次に、必要に応じてSVG文字列を操作します（幅、高さ、色などを設定します）。 結果を使用して背景を設定します。

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

私もデモを作った、 http://sassmeister.com/gist/4cf0265c5d0143a9e734 。

このコードは、SVGについていくつかの仮定をしています。たとえば、 <svg />要素には既存の塗りつぶしの色がなく、widthまたはheightのどちらのプロパティも設定されていません。 入力はSCSS文書でハードコードされているので、これらの制約を実施するのは非常に簡単です。

コードの重複を心配しないでください。 gzip圧縮はその差を無視します。

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

コードベンの記事とデモ

いくつかの（非常に特殊な）状況では、これはfilterを使用することによって達成されるかもしれません。 たとえば、 filter: hue-rotate(45deg);を使用して色相を45度回転させることによって、青いSVG画像を紫色に変更することができfilter: hue-rotate(45deg); 。 ブラウザのサポートは最小限に抑えられますが、それはまだ興味深いテクニックです。

Demo

多くのIFがありますが、あなたのpre base64でエンコードされたSVGが起動した場合：

<svg fill="#000000

base64でエンコードされた文字列が始まります：

PHN2ZyBmaWxsPSIjMDAwMDAw

事前にエンコードされた文字列が始まる場合：

<svg fill="#bfa76e

これは次のようにエンコードします。

PHN2ZyBmaWxsPSIjYmZhNzZl

どちらのコード化された文字列も同じように始まります

PHN2ZyBmaWxsPSIj

base64エンコーディングの奇妙な点は、3つの入力文字がそれぞれ4つの出力文字になることです。 このようにSVGを開始すると、6文字の16進数の塗りつぶしの色は、エンコーディングブロック '境界'で正確に始まります。 したがって、簡単にクロスブラウザJSを置き換えることができます：

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

しかし、上記のtnt-roxの答えは前進する方法です。