SVG 画像を CSS 疑似要素のコンテンツとして使用できますか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-12-08 09:51:11

オリジナル

645 人が閲覧しました

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

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

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

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

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

ログイン後にコピー

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

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