CSS を使用して SVG 背景画像の塗りつぶしの色を変更するにはどうすればよいですか?

背景画像として SVG 画像の塗りつぶしの色を変更する方法

SVG 画像をインラインで埋め込む場合、CSS を使用して塗りつぶしの色を簡単に変更できます。ただし、SVG が背景画像として使用される場合、この手法には問題が生じます。

この質問は、背景画像として使用される SVG の塗りつぶし属性を変更する必要性について説明します。問題の SVG には、特定の塗りつぶし色を持つ星と円が含まれています。

解決策は、CSS マスクを実装することにあります。マスク プロパティは、要素に適用されるマスクを作成します。マスク画像はSVGファイルのURLに設定されます。マスクを目的の要素に適用すると、埋め込まれた SVG の塗りつぶしの色を効果的に変更できます。

次の CSS コードは、マスクの使用方法を示しています。

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

この例では、 .icon クラスの背景は赤になり、SVG マスクが適用されて、SVG の塗りつぶしの色が変更されます。

詳細については、このテクニックについては、次の包括的な記事を参照してください:

https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

以上がCSS を使用して SVG 背景画像の塗りつぶしの色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。