SVG as data URI not rendering

问题

It's probably just a syntax error but I can't find any thorough references on this kind of usage. Chrome is overstriking my background property, so I've obviously offended something.

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

I want what's in the red box (an svg css background) to render just like the inline svg in the html. Simple, right?

Don't say it can't be done! My inspiration is this: http://jsfiddle.net/estelle/SJjJb/

回答1:

You haven't escaped the '#' characters in the url() syntax. And it's 'viewBox' not 'viewbox'.

Here's something that works: http://jsfiddle.net/YbA39/3/ (just a quick urlescaped string).

回答2:

The newlines in the declaration were breaking it. Removing all the newlines fixes it in all but IE, which requires base64 or URI encoding:

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

来源：https://stackoverflow.com/questions/11463276/svg-as-data-uri-not-rendering