Veri kullanma: CSS filtresi olarak kodlanmış SVG

Belki de birisi bir hatayı sınamada gösterebilir, ancak ek bir dosya kullanmaktan kaçınmak için CSS kodlamasını data: uri olarak kullanmak gerekirse, SVG filtresi kullanmak isterse başarısız olur. veri base64 olarak kodlanmamışsa.Veri kullanma: CSS filtresi olarak kodlanmış SVG

Firefox Aurora ile test ettim, diğer tarayıcılar da filtreyi algılamıyor gibi görünüyor.

Testi dosyası: http://martinezdelizarrondo.com/bugs/svgfilter.html

url içeriği (en

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 

#filter1 { 
filter:url(data:image/svg+xml,<svg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"><filter id%3D"desaturate"><feColorMatrix type%3D"saturate" values%3D"0"%2F><%2Ffilter><%2Fsvg>#desaturate); 
} 

#filter2 { 
filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate); 
} 

</style> 
</head> 
<body> 
<p style="color:red" id=filter1>Filter applied "as is"</p> 
<p style="color:red" id=filter2>This one is encoded as base64</p> 
</body> 
</html>

Canlı demo) her iki durumda da aynıdır:

<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>

http://software.hixie.ch/utilities/cgi/data/data

ile kodlanmış Gördüğünüz gibi, ilki kırmızı kalır, ancak d durumda svg filtresi uygulanır ve metin gri olur.

İlk durumda bir şeyi unuttum mu? this bug yılında

Ben kodlama hakkında bir şey bulmuyorum, bu yüzden mümkün olması gerektiğini tahmin

Teşekkür

(ve kesinlikle daha basit bir metin kodlamasını kullanan base64 ile "şifreleyerek" nin çok daha iyi yerine ise)

kaynak

2012-07-28 AlfonsoML

Daha fazla deneme ve hatadan sonra veri işlerinde kaçış kullanıldığını fark ettim ve şimdi diğer tarayıcıların bunun için destek almasını beklemek zorundayız.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 

#filterBase64 { 
    filter:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImRlc2F0dXJhdGUiPjxmZUNvbG9yTWF0cml4IHR5cGU9InNhdHVyYXRlIiB2YWx1ZXM9IjAiLz48L2ZpbHRlcj48L3N2Zz4%3D#desaturate); 
} 

#filterEscape { 
    filter:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cfilter%20id%3D%22desaturate%22%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22/%3E%3C/filter%3E%3C/svg%3E#desaturate); 
} 

</style> 
</head> 
<body> 
<p style="color:red" id=filterBase64>This one is encoded as base64</p> 
<p style="color:red" id=filterEscape>Filter encoded with "escape()"</p> 
<p style="color:red" id=filterScript>This one is applied with javascript</p> 
<script> 
document.getElementById("filterScript").style.filter="url(data:image/svg+xml," + escape('<svg xmlns="http://www.w3.org/2000/svg"><filter id="desaturate"><feColorMatrix type="saturate" values="0"/></filter></svg>') + "#desaturate)"; 
</script> 
</body> 
</html>

kaynak

2012-07-28 20:36:57 AlfonsoML

bu eski şeyler olduğunu biliyorum, ama krom benzer bir şey desteklemek yapar ve böylece IE çeşitli filtre sözdizimi kullanılarak yapar: http://www.html5rocks.com/en/tutorials/filters/understanding-css/. FF bir dosya yoluna ihtiyaç duyar, Chrome yeni filtre özelliğini ve IE'yi eski destekleyebilir :) Daha fazla bilgi burada: http://stackoverflow.com/questions/13695176/referencing-in-page-svg-in-chrome –

Başka biri Bunun artık işe yaramadığını fark ettiniz mi? 'arkaplan-imajı: url (veri ...)' iyi çalışır, ancak aynı 'veriyi…' 'filtreye koy: url (veri ...)' ve '' URL'yi yüklemek için güvensiz bir girişimde bulunur. . – rojobuffalo

Veri kullanma: CSS filtresi olarak kodlanmış SVG

cevap

İlgili konular