11

誰かが私のテストでエラーを指摘できるかもしれませんが、CSS エンコードで SVG フィルターをdata: uri使用して追加のファイルを使用しないようにしたい場合、データが base64 としてエンコードされていないと失敗するようです。

私は 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>

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

url() の内容はどちらの場合も同じです。

<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でエンコード

ご覧のとおり、最初の例は赤のままですが、2 番目の例では svg フィルタが適用され、テキストが灰色になります。

最初のケースで何かを忘れましたか?

このバグでは、エンコーディングについて何も見つけられなかったので、それは可能であると思います (そして、確かに base64 で「暗号化」するよりも、より単純なテキスト エンコーディングを使用する方がはるかに優れています)。

ありがとう

4

1 に答える 1

12

試行錯誤を繰り返した結果、データに対してエスケープを使用すると機能することがわかりました。今は、他のブラウザーがそれをサポートするのを待つだけです。

<!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-28T20:36:57.643 に答える