使用數據：編碼SVG的CSS濾鏡

也許有人可以在我的測試點錯誤，但似乎如果我想使用CSS編碼作爲data: uri一個SVG過濾器，以避免使用額外的文件，它失敗如果數據不是以base64編碼的話。使用數據：編碼SVG的CSS濾鏡

我已經在Firefox極光測試，其他的瀏覽器似乎並沒有認識到過濾器在兩種情況。

測試文件：

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

正如你所看到的，第一個仍然是紅色，但在第二個如果應用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

我知道這是舊的東西，而Chrome不支持類似的事情，並使用IE各種過濾語法也是如此：http://www.html5rocks.com/en/tutorials/filters/understanding-css/。 FF需要一個文件路徑，Chrome瀏覽器可以支持新的篩選器屬性和IE舊:)更多的好信息在這裏：http://stackoverflow.com/questions/13695176/referencing-in-page-svg-in-chrome – 2013-03-08 04:26:27

任何人注意到這不起作用了？ 'background-image：url（data ...）'可以正常工作，但將'data ...'放在'filter：url（data ...）'中，並且它會得到一個不安全的嘗試來加載URL ..錯誤。 – rojobuffalo 2015-12-12 20:07:09

使用數據：編碼SVG的CSS濾鏡

回答

相關問題