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

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

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

CSS マスクを使用してこれを実現する方法は次のとおりです。

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

これにより、提供されたマスクに基づいてマスクが作成されます。 SVG 画像を指定した要素に適用します。その結果、要素の背景色は SVG の fill 属性の影響を受けます。

詳細については、洞察力に富んだ記事を参照してください: https://codepen.io/noahblon/post/coloring-svgs-in-css-背景画像

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