SVG as data URI not rendering

這可能只是一個語法錯誤，但我找不到任何關於這種用法的全面參考。 Chrome瀏覽器對我的背景屬性加重，所以我明顯得罪了一些東西。SVG as data URI not rendering

http://jsfiddle.net/YbA39/2/

我想在紅色方框（一個SVG的CSS背景）什麼是渲染就像HTML中聯SVG。很簡單，對吧？

不要說它不能做！我的靈感是這樣的：http://jsfiddle.net/estelle/SJjJb/

來源

2012-07-13 Ben

你還沒有逃過url（）語法中的'＃'字符。它是'viewBox'而不是'viewbox'。

這是一些工作：http://jsfiddle.net/YbA39/3/（只是一個快速的urlescaped字符串）。

來源

2012-07-13 09:05:00

嗯，是的，這確實工作。但這並不能解釋爲什麼我的例子不起作用。 Chrome20，Firefox13和Opera12都支持未編碼的SVG作爲數據URI。（只有IE9需要base64或URI編碼，嚴格遵守規範）。爲了證明，看看第二個'estelle'小提琴。它不會轉義它的'＃'字符，也不是URI編碼的，並且它工作正常。爲什麼？我和estelle的區別是什麼？在viewbox中大寫「b」（很好的捕捉！）不能修復它... – Ben 2012-07-13 19:51:08

estelle示例在Firefox或Opera中不起作用。 – 2012-07-15 18:14:22

對。哎呀，我以爲我查過了！我將堅持URI編碼。出於好奇：任何計劃支持Opera中的未編碼數據-URI，la Chrome？從我可以告訴數據-URI規範自1998年以來沒有被觸及。是否會延長？ – Ben 2012-07-15 22:36:58

聲明中的換行符正在破壞它。刪除所有的換行符修復它，但在所有IE瀏覽器，它要求一個base64或URI編碼：

http://jsfiddle.net/YbA39/4/

來源

2012-07-13 19:57:47 Ben

SVG as data URI not rendering

回答

相關問題