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





7 Answers

私は似たものが必要でしたし、CSSを使いたいと思っていました。 ここでは、LESSとSCSSのミックスインだけでなく、これを手伝ってくれる普通のCSSもあります。 残念ながら、ブラウザのサポートは少しゆるやかです。 ブラウザーのサポートの詳細については、以下を参照してください。

より少ないmixin:

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

少ない使用量:

.element-color(#fff);

SCSSミックスイン:

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

CSSファイルに完全なSVGコードを埋め込む方法については、 こちらをご覧ください 。 また、これは実行可能なオプションであるためには少し小さすぎるブラウザ互換性についても言及しています。

背景色 javascript 背景画像

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

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

これは素晴らしいですが、SVGの "塗りつぶし"属性を変更して背景画として使用する方法を探しています。

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マスクを使うことができます。 '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-imageshttps://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の答えは前進する方法です。




Related