使用CSS :before 和:after 設定內聯SVG 樣式
使用CSS :before 和:after 偽元素設定內聯SVG 元素的樣式事實證明這是一個挑戰。儘管它有潛力增強 SVG 的視覺效果,但由於 SVG 作為替換元素的性質,這種方法面臨著局限性。
:before 和 :after 偽元素主要用於在元素內產生內容,導致匿名替換元素。但是,SVG 已經被取代元素,因此很難使用產生的內容注入附加內容。
提供的範例 (http://jsfiddle.net/wD56Q/) 示範了使用 :before 定義的樣式的問題無法影響 SVG。這是因為 SVG 與圖像一樣,無法包含生成的內容。它們被認為是原子的,不會受到改變其內部內容的 CSS 屬性的影響。
為了克服這個限制,人們可以探索像 CSS :outside 這樣的實驗性解決方案,這是一種偽元素,它將產生的內容放置在被替換元素之外而不是在裡面。然而,這種方法仍在開發中,可能不會得到廣泛支持。
總之,目前不支援使用 CSS :before 和 :after 直接設定內聯 SVG 元素的樣式。由於 SVG 是替換元素,因此它們不能包含生成的內容。其他方法,例如 CSS :outside,可能會在未來提供潛在的解決方案,但它們的採用仍不確定。
以上是CSS :before 和 :after 偽元素可以設定內聯 SVG 樣式嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!