Verwenden eines Daten: codierte SVG als CSS-Filter

Vielleicht kann jemand einen Fehler in meinem Test zeigen, aber es scheint, dass es fehlschlägt, wenn ich einen SVG-Filter in CSS als data: uri verwenden verwenden, um die Verwendung einer zusätzlichen Datei zu vermeiden wenn die Daten nicht als base64 codiert sind.Verwenden eines Daten: codierte SVG als CSS-Filter

Ich habe mit Firefox Aurora getestet, andere Browser scheinen den Filter in beiden Fällen nicht zu erkennen.

Testdatei:

<!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>

Live-Demo auf http://martinezdelizarrondo.com/bugs/svgfilter.html

der Inhalt der URL() ist die in beiden Fällen gleich:

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

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

Wie Sie sehen können, bleibt der erste rot, aber im zweiten d Fall der Svg Filter angewendet wird und der Text wird grau.

Habe ich im ersten Fall etwas vergessen?

In this bug ich etwas über die Kodierung nicht finden, so dass ich denke, dass es möglich sein sollte (und sicherlich eine einfachere Textcodierung ist viel besser, anstatt es mit base64 „Verschlüsselung“)

Dank

Quelle

2012-07-28 AlfonsoML

Nach weiteren Versuchen und Fehlern habe ich festgestellt, dass die Verwendung von Escape für die Daten funktioniert und jetzt müssen wir nur warten, bis andere Browser die Unterstützung dafür implementieren.

<!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>

Quelle

2012-07-28 20:36:57 AlfonsoML

Ich weiß, das alte Zeug, aber Chrom hat eine ähnliche Sache unterstützen und so auch IE verschiedene Filter Syntaxen mit: http://www.html5rocks.com/en/tutorials/filters/understanding-css/. FF benötigt einen Dateipfad, Chrome kann die neue Filtereigenschaft und IE den alten unterstützen :) Weitere gute Infos hier: http://stackoverflow.com/questions/13695176/referencing-in-page-svg-in-chrome –

Sonst noch jemand Beachten Sie, dass das nicht mehr funktioniert? 'background-image: url (data ...)' funktioniert gut, aber platziere das gleiche 'data ...' in 'filter: url (data ...)' und es wird ein 'Unsafe Versuch, die URL zu laden .. .' Fehler. – rojobuffalo

Verwenden eines Daten: codierte SVG als CSS-Filter

Antwort

Verwandte Themen