ホームページ > ウェブフロントエンド > CSSチュートリアル > SVG 画像を CSS 疑似要素のコンテンツとして使用できますか?

SVG 画像を CSS 疑似要素のコンテンツとして使用できますか?

Barbara Streisand
リリース: 2024-12-08 09:51:11
オリジナル
622 人が閲覧しました

Can I Use SVG Images as Content in CSS Pseudo-elements?

SVG を疑似要素のコンテンツとして表示する

CSS では、::before や ::after などの疑似要素で要素を強化できます前後にコンテンツを追加して外観を変更します。テキスト コンテンツが一般的に使用されますが、これらの疑似要素内のコンテンツとして SVG 画像を表示することは可能ですか?

これを実現するには、SVG 画像の URL を疑似要素のコンテンツ値として指定します。例:

1

2

3

4

5

#test::before {

  content: url(path/to/your.svg);

  width: 200px;

  height: 200px;

}

ログイン後にコピー

また、data:image/svg XML 構文を使用して、SVG を CSS 内に直接埋め込むこともできます:

1

2

#test::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 の機能を使用してグラフィックを Web ページに追加します。

以上がSVG 画像を CSS 疑似要素のコンテンツとして使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート