背景画像の CSS 内にインライン SVG 定義を埋め込むにはどうすればよいですか?

CSS へのインライン SVG 定義の埋め込み

CSS の興味深い側面の 1 つは、スタイルシート内にインライン SVG 定義を組み込める機能です。この手法を使用すると、開発者は SVG グラフィックを CSS コードに直接埋め込み、背景画像やその他の視覚要素として使用できます。

SVG を使用して単純な線形グラデーションを作成する次の例を考えてみましょう:

.my-class {
  background-image: <svg>...< /svg>;
}

これを機能させるには、次のように「background-image」プロパティ内で SVG グラデーションを定義する必要があります。 so:

body {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
    <linearGradient>

「data:」 URI スキームを使用すると、SVG 定義を CSS ファイルに埋め込み、背景画像としてレンダリングできるようになります。結果は、「my-class」セレクターを使用して任意の要素に適用できる動的なグラデーションの背景になります。

以上が背景画像の CSS 内にインライン SVG 定義を埋め込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。