☰

背景画像として提供される SVG 画像の塗りつぶし色を変更するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon html css svg
背景画像として提供される SVG 画像の塗りつぶし色を変更するにはどうすればよいでしょうか? 質問する

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

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

これはうまく機能しますが、BACKGROUND-IMAGE として提供されるときに SVG の「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>

ベストアンサー1

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

おすすめ記事