css - 使用 Data URI SVG 作为 CSS 背景图片

Question

背景故事:

• 目标:创建一个可以通过 CSS 应用并且与比例无关的三 Angular 形阴影(即矢量，而不是光栅图像)
• 经过大量研究(当然我对替代方案持开放态度)我选择使用 SVG 背景图像作为数据 uri(以避免额外的 HTTP 请求)。
• 我知道这可以工作:http://jsfiddle.net/6WAtQ/

我被困在哪里:

• 我创建了一个简单的 svg 三 Angular 形，具有高斯模糊效果，如果直接用 HTML(而不是 CSS)编写，svg 可以完美运行:http://jsfiddle.net/RAKWB/

<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <polygon points="200,0 200,200 0,200" filter="url(#f1)"/>
</svg>​

• 所以我尝试使用我自己的三 Angular 形 svg 复制上面的内容 (http://jsfiddle.net/6WAtQ/)，
• 我用“%23”替换了井号，但没有骰子
• 它不工作:http://jsfiddle.net/ZPWxK/1/

body {
  background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>");
}

想法？

Answer 1

看看工作 fiddle 如何在 url() 内使用双引号，然后所有 SVG 内容都使用单引号？你需要做同样的事情。否则解析器不知道 url 内容在哪里结束。

或者，您可以使 url 使用单引号并保持 SVG 内容不变。

body { background-image: url('data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>'); }