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

SVG 背景画像の塗りつぶし色の変更

CSS を使用して SVG を背景画像として組み込む場合、その塗りつぶし属性を直接変更できる機能CSS による制限があります。このシナリオで塗りつぶしの色を変更するための解決策は次のとおりです。

CSS マスク

CSS マスクを使用すると、要素に適用されるマスクを作成できます。 SVG にこの手法を使用するには、次の手順に従います。

1. SVG を「icon.svg」などの別のファイルに配置します。
2. 作成する要素でマスク プロパティを使用します。 SVG 背景を次の場所に適用したい:

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

これは、 SVG の形状を取得し、.icon クラスを使用して要素に適用します。

注:

• 要素の背景色は、要素の塗りつぶし色として機能します。 SVG.
この手法は SVG をマスクし、画像全体に影響を与えます。 SVG 内の特定の形状を選択的に変更するには、CSS セレクターを使用してそれらをターゲットにすることができます。

詳細情報:

CSS で SVG を色付けするための優れたリソース背景画像は次の場所から入手できます。 https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

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