Question

背景故事：

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

我被困的地方：

我创建了一个简单的svg三角形，具有高斯模糊效果，如果直接在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>
所以我试图用我自己的三角形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

在url()内查看工作小提琴如何使用双引号，然后所有SVG内容都使用单引号？你需要做同样的事情。否则，解析器不知道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>'); }

Answer 2

即使它增加了实际的SVG文件大小，您也可以将base64编码用于更干净的格式。另请参阅css-tricks.com post。

即：

background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIy NCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9 Ik0wIDBoMjR2MjRoLTI0eiIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZD0iTTEw LjA5IDE1LjU5bDEuNDEgMS40MSA1LTUtNS01LTEuNDEgMS40MSAyLjU4IDIuNTlo LTkuNjd2Mmg5LjY3bC0yLjU4IDIuNTl6bTguOTEtMTIuNTloLTE0Yy0xLjExIDAt MiAuOS0yIDJ2NGgydi00aDE0djE0aC0xNHYtNGgtMnY0YzAgMS4xLjg5IDIgMiAy aDE0YzEuMSAwIDItLjkgMi0ydi0xNGMwLTEuMS0uOS0yLTItMnoiLz4KPC9zdmc+ Cg==');

您可以使用此bash命令（在MacOS X上测试）轻松生成CSS背景属性：

echo "background: url('data:image/svg+xml;base64,"$(openssl base64 < Downloads/material-design-icons-1.0.0/action/svg/ic_exit_to_app_24px.svg)"');"

Answer 3

确保对未使用base64编码的数据URI进行百分比编码。

例如，对于SVG，编码如下：

body { 
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20class%3D%22shadow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%3E%3Cpolygon%20style%3D%22stroke%3A%23252423%3Bfill%3A%23252423%3B%22%20points%3D%220%2C200%200%2C0%20200%2C0%22%2F%3E%3C%2Fsvg%3E'); 
}

这等效于以下SVG：

<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon style="stroke:#252423;fill:#252423;" points="0,200 0,0 200,0"/></svg>

要对图像进行百分比编码，可以使用以下JavaScript代码：

console.log(encodeURIComponent('<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon style="stroke:#252423;fill:#252423;" points="0,200 0,0 200,0"/></svg>'))

使用数据URI SVG作为CSS背景图像

3 个答案: