css - CSS 中的内联 SVG

Question

是否可以在 CSS 中使用内联 SVG 定义？

我的意思是这样的:

.my-class {
  background-image: <svg>...</svg>;
}

Answer 1

是的，这是可能的。试试这个:

body { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
      }

• http://jsfiddle.net/6WAtQ/

(请注意，SVG 内容需要进行 url 转义才能正常工作，例如 # 被替换为 %23。)

This works in IE 9 (which supports SVG) . Data-URL 也适用于旧版本的 IE(有限制)，但它们本身不支持 SVG。