データ：符号化されたSVGをCSSフィルタとして使用する

私のテストでは誰かがエラーを指摘するかもしれませんが、追加ファイルの使用を避けるためにCSSでSVGフィルタをdata: uriとしてエンコードすると、データがbase64としてエンコードされていない場合データ：符号化されたSVGをCSSフィルタとして使用する

Firefox Auroraでテストしましたが、他のブラウザではどちらの場合でもフィルタが認識されないようです。

テストファイル：

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

ライブデモURLのhttp://martinezdelizarrondo.com/bugs/svgfilter.html

の内容は、（）どちらの場合も同じです。

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

でエンコード

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

あなたが見ることができるように、最初のものは赤のままですが、2番目のsvgフィルタが適用され、テキストがグレーになります。

最初のケースで何かを忘れましたか？ this bugで

私はエンコーディングについては何も見つからないので、私はそれが可能でなければならないことを推測

おかげ

を（そして確かに単純なテキストエンコーディングを使用しては、base64でそれを「暗号化」のより良い代わりです）

出典

2012-07-28 AlfonsoML

多くの試行錯誤の末、データ上でエスケープを使用すると、他のブラウザがサポートするまで待つだけで済みます。

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

出典

2012-07-28 20:36:57 AlfonsoML

私は、これは古いものですけど、クロムは同じようなことをサポートし、そのIEは、さまざまなフィルタ構文を使用して行いますhttp://www.html5rocks.com/en/tutorials/filters/understanding-css/。 FFはファイルパスが必要ですが、Chromeは新しいフィルタプロパティをサポートし、古いバージョンのIEをサポートしています:)もっと良い情報：http://stackoverflow.com/questions/13695176/referencing-in-page-svg-in-chrome –

他の人これはもう動作しないことに注意してください。 'background-image：url（data ...）'は正常に動作しますが、 'filter：url（data ...） 'に同じ' data ... 'を置き、URLをロードするのに安全でない試みが発生します。エラーです。 – rojobuffalo

データ：符号化されたSVGをCSSフィルタとして使用する

答えて

関連する問題