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

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

背景画像として使用される SVG 画像に CSS スタイルを直接適用できますか?

SVG を背景画像として使用するのは一般的ですが、CSS スタイルを SVG 自体に直接拡張することはできません。サポートされました。 SVG ファイルと CSS ファイルは別個のエンティティとして存在し、インライン スタイル機能が制限されています。

提供された CSS の例では、

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

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

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

内のパスの塗りつぶしの色を変更しようとしています。要素のクラスに基づく SVG。ただし、SVG は CSS ファイル内のライブ コードとしてではなく画像としてレンダリングされるため、これは実現できません。

目的の効果を実現するには、SVG ファイル自体内でスタイルを事前定義するか、SVG にアクセスする必要があります。 JavaScript を使用して色を動的に操作します。

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