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

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

インライン SVG 要素を使用する場合、CSS を利用して塗りつぶしの色を簡単に変更できます。ただし、SVG が背景画像として使用されている場合、この方法は適用できません。この課題に対処するには、CSS マスクの活用を検討してください。

「マスク」プロパティを使用すると、要素に適用されるマスクを確立できます。このプロパティを使用すると、以下に示すように、SVG ファイルをマスク イメージとして指定できます。

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

このアプローチでは、要素の背景色が赤に設定され、SVG ファイルはマスク イメージとして機能します。マスク。それに応じて SVG 形状の塗りつぶしの色を変更します。この手法の詳細については、次の記事を参照してください: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

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