インライン定義を使用して SVG 画像を CSS に直接埋め込むにはどうすればよいですか?

CSS へのインライン SVG 画像の組み込み

CSS は、インライン定義を使用してコードベース内にスケーラブル ベクター グラフィックス (SVG) を直接統合する便利な方法を提供します。 。この手法を使用すると、開発者は SVG グラフィックを背景画像または他のデザイン要素として埋め込むことができます。

使用法

CSS にインライン SVG 画像を埋め込むには、次のコマンドを使用します。構文:

/* Class with inline SVG background image */
.my-class {
  background-image: url("data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' width='...' height='...'>
      ...
    </svg>");
}

例

次の例を考えてみましょう:

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

この例では、インライン SVG 定義によりカラフルなグラデーションが作成されます。ページ全体に広がる背景。インライン SVG には、色のグラデーションとそのグラデーションで塗りつぶされた四角形を定義する LinearGradient が含まれています。

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