CSS ::before および ::after 疑似要素に SVG を埋め込むにはどうすればよいですか?

擬似要素::before および ::after での SVG の使用

多くの場合、擬似要素内のコンテンツとして SVG 画像を埋め込むことが望まれます。 ：：前後。プレーンテキスト バージョンは機能しませんが、URL() またはインライン データ URI を使用する代替ソリューションがあります。

URL() を使用する

最初の方法では、 SVG ファイルの URL:

#mydiv::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

データの使用URI

もう 1 つのオプションは、データ URI エンコーディングを使用して SVG を CSS に直接エンコードすることです。

#mydiv::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180'>

この方法では、SVG 画像を CSS に直接埋め込むことができます。自己完結型です。

以上がCSS ::before および ::after 疑似要素に SVG を埋め込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。