SVG 作为数据 URI 不呈现答案

【问题标题】：SVG as data URI not renderingSVG 作为数据 URI 不呈现
【发布时间】：2012-07-13 02:21:05
【问题描述】：

这可能只是一个语法错误，但我找不到任何关于这种用法的详尽参考。 Chrome 过度使用了我的背景属性，所以我显然得罪了一些东西。

我希望红色框中的内容（一个 svg css 背景）像 html 中的内联 svg 一样呈现。很简单吧？

别说做不到！我的灵感是这样的：http://jsfiddle.net/estelle/SJjJb/

【问题讨论】：

【解决方案1】：

您没有转义 url() 语法中的“#”字符。它是“viewBox”而不是“viewbox”。

以下是可行的：http://jsfiddle.net/YbA39/3/（只是一个快速转义字符串）。

【讨论】：

嗯，是的，这确实有效。但这并不能真正解释为什么我的示例不起作用。 Chrome20、Firefox13 和 Opera12 都支持未编码的 SVG 作为数据 URI。（只有 IE9 需要 base64 或 URI 编码，严格遵守规范）。为了证明，看看第二个“estelle”小提琴。它不会转义它的“#”字符，也不是 URI 编码的，它工作正常。为什么？我的和estelle的有什么区别？大写视图框中的“b”（很好！）并不能解决它......
对。糟糕，我以为我已经检查过了！我会坚持使用 URI 编码。只是出于好奇：有计划在 Opera 中支持未编码的数据 URI，比如 Chrome 吗？据我所知，data-URI 规范自 1998 年以来就没有被触及过。它会被扩展吗？
感谢“编码”。我使用meyerweb.com/eric/tools/dencoder 对整个进行编码，所以现在除了 IE（甚至是 v.11）之外它运行良好

【解决方案2】：

声明中的换行符破坏了它。删除所有换行符可以修复除 IE 之外的所有问题，这需要 base64 或 URI 编码：

【讨论】：