Bolehkah CSS :before dan :after Pseudo-elements Style Inline SVGs?

Menggayakan SVG Sebaris dengan CSS :sebelum dan :selepas

Menggunakan CSS :sebelum dan :selepas elemen pseudo untuk menggayakan elemen SVG sebaris telah terbukti menjadi cabaran. Walaupun potensinya untuk meningkatkan kesan visual SVG, pendekatan ini menghadapi had disebabkan sifat SVG sebagai elemen yang digantikan.

Elemen pseudo :sebelum dan :selepas digunakan terutamanya untuk menjana kandungan dalam elemen, mengakibatkan elemen diganti tanpa nama. Walau bagaimanapun, SVG telah pun menggantikan elemen, menjadikannya sukar untuk menyuntik kandungan tambahan menggunakan kandungan yang dijana.

Contoh yang disediakan (http://jsfiddle.net/wD56Q/) menunjukkan isu di mana penggayaan ditakrifkan dengan :before gagal menjejaskan SVG. Ini kerana SVG, seperti imej, tidak boleh mengandungi kandungan yang dijana. Mereka dianggap atom dan tidak boleh dipengaruhi oleh sifat CSS yang mengubah kandungan dalaman mereka.

Untuk mengatasi had ini, seseorang boleh meneroka penyelesaian percubaan seperti CSS :outside, elemen pseudo yang meletakkan kandungan terjana di luar elemen yang diganti bukannya di dalamnya. Walau bagaimanapun, pendekatan ini masih dalam pembangunan dan mungkin tidak disokong secara meluas.

Kesimpulannya, menggayakan elemen SVG sebaris secara langsung menggunakan CSS :before dan :after pada masa ini tidak disokong. Memandangkan SVG digantikan elemen, ia tidak boleh mengandungi kandungan yang dijana. Pendekatan lain, seperti CSS :outside, mungkin menyediakan penyelesaian yang berpotensi pada masa hadapan, tetapi penggunaannya masih tidak pasti.

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