Inline SVG, bir CSS filtresi uygulandığında iOSand Safari'de kaybolur

Question

Durum şu: Grunticon tarafından oluşturulan ve DOM'a eklenmiş bir satır içi SVG var. Alt gölgeli gri bir arka plan üzerinde beyaz.

svg { 
    -webkit-filter: drop-shadow(1px 1px 0 #141414); 
    filter: drop-shadow(1px 1px 0 #141414); 
} 

Bu Chrome, Opera, Firefox'ta çalışıyor ve başka her yerde ben iOS ve masaüstünde Safari hariç test ettik:

Ben gölge için aşağıdaki CSS kullanılır. CSS filtresi SVG'nin kaybolmasını sağlar.

Bu, yalnızca drop-shadow filtresi değil, herhangi bir filtrenin de bu etkiyi yaratmış gibi görünüyor. Bu turda çalışmış edilebilir Safari'de çalışması için

Bir demo http://codepen.io/derekjohnson/pen/MyOaRY

de Codepen var?

Answer 1

Bunun işe yaramadığını görüyoruz, ancak Safari, her şeyden önce yeni IE! : Bir geçici çözüm, SVG'yi başka bir öğeye sarmak ve filtreyi bu uygulamaya uygulamaktır.