Bagaimanakah Saya Boleh Membenamkan SVG dalam CSS ::before dan ::after Pseudo-elements?

Menggunakan SVG dalam ::sebelum dan ::selepas Pseudo-Elements

Ia selalunya dikehendaki untuk membenamkan imej SVG sebagai kandungan dalam unsur pseudo ::sebelum dan ::selepas. Walaupun versi teks biasa tidak berfungsi, terdapat penyelesaian alternatif menggunakan URL() atau URI data sebaris.

Menggunakan URL()

Kaedah pertama melibatkan rujukan URL fail SVG:

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

Menggunakan Data URI

Pilihan lain ialah mengekod SVG terus ke dalam CSS menggunakan pengekodan URI data:

#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'>

Kaedah ini membolehkan anda membenamkan imej SVG terus ke dalam CSS, menjadikan ia serba lengkap.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membenamkan SVG dalam CSS ::before dan ::after Pseudo-elements?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!