インライン定義を使用して SVG 画像を CSS に直接埋め込むにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Patricia Arquette

リリース： 2024-12-09 20:52:10

オリジナル

829 人が閲覧しました

How Can I Embed SVG Images Directly into My CSS Using Inline Definitions?

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 サイトの他の関連記事を参照してください。