Bolehkah CSS :before dan :after Pseudo-Elements Style Inline SVG?

Menggayakan SVG Sebaris menggunakan CSS :sebelum dan :selepas Pseudo-Elements

Pengenalan

CSS :before dan :after pseudo-elemen biasanya digunakan untuk meningkatkan elemen HTML dengan hiasan atau kandungan berfungsi. Walau bagaimanapun, apabila menyentuh elemen SVG sebaris, menggunakan elemen pseudo ini boleh menghadapi cabaran. Artikel ini meneroka sebab ia mencabar dan menyediakan penyelesaian yang berpotensi.

SVG sebagai Kandungan Diganti

Elemen SVG sebaris dianggap sebagai kandungan diganti, bermakna ia menggantikan kandungan asal elemen yang mereka rujuk. Tingkah laku ini wujud kepada semua elemen seperti imej, termasuk SVG. Akibatnya, kandungan yang dijana, seperti yang dibuat oleh :before dan :after, tidak dibenarkan dalam elemen yang diganti.

Mengapa :before dan :after Gagal dengan SVG

Dokumentasi MDN menyatakan bahawa elemen yang dicipta menggunakan :before dan :after ialah "elemen diganti tanpa nama." Memandangkan kandungan yang diganti tidak boleh mengandungi kandungan yang dijana, ini menerangkan sebab penggunaan :sebelum dan :selepas ke SVG sebaris adalah tidak berkesan.

Penyelesaian Potensi - :di luar Elemen Pseudo

Sebuah penyelesaian yang menarik dicadangkan dalam dokumen draf CSS bertajuk "Modul Kandungan Dijana dan Diganti CSS3." Dokumen ini memperkenalkan elemen pseudo baharu, :outside, yang meletakkan kandungan terjana di luar elemen yang diganti. Dengan menggunakan :luar, adalah mungkin untuk mengatasi batasan :before dan :after apabila digunakan dengan SVG sebaris.

Kesimpulan

Sementara penggunaan CSS : sebelum dan :selepas unsur pseudo pada SVG sebaris secara amnya tidak disokong, unsur pseudo di luar menawarkan potensi penyelesaian untuk meletakkan kandungan terhasil bersebelahan dengan elemen SVG. Pembangun harus mengetahui perbezaan antara elemen sebaris dan diganti semasa mereka bentuk gaya CSS mereka.

Atas ialah kandungan terperinci Bolehkah CSS :before dan :after Pseudo-Elements Style Inline SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!