CSS を使用して SVG 背景画像のスタイルを設定できますか?

CSS を使用した SVG 背景画像のスタイル設定

SVG が設定されているのと同じ CSS ファイルを使用して、背景画像として使用するときに SVG のスタイルを設定できますか

SVG 画像を (個別にまたはスプライトとして) 正常に配置、拡大縮小、クリップすることはできますが、背景画像として割り当てる同じ CSS ファイル内で SVG のスタイルを設定することは現実的ではありません。

次の疑似 CSS コードを考えてみましょう。これは、親要素のクラスに基づいて図形の色を変更することを目的としています。

element1 {
    background-image(icon.svg);
}

element1.black .svg-pathclass {
    fill: #000000;
}

element1.white .svg-pathclass {
    fill: #ffffff;
}

このアプローチでは、SVG に「svg-pathclass」のパスが含まれていることを前提としています。 " クラスは機能しません。

その理由は SVG と CSS の性質にあります。 SVG は、データ URI で準備したり、外部から参照したりできるスタンドアロン ドキュメントです。別のファイルで背景画像として使用されると、CSS で変更できない不変の画像になります。

以上がCSS を使用して SVG 背景画像のスタイルを設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。