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

Backstory:

Goal: create a triangular shadow that can be applied via CSS and is scale-independant (i.e. a vector, not a raster image)

目标:创建一个可以通过CSS应用的三角形阴影,并且与比例无关(即矢量,而不是光栅图像)

After much research (tho I'm certainly open to alternatives) I chose to use an SVG background image as a data uri (to avoid the extra HTTP request).

经过大量研究(我当然对替代方案开放)我选择使用SVG背景图像作为数据uri(以避免额外的HTTP请求)。

I know that this can work: http://jsfiddle.net/6WAtQ/

我知道这可行:http://jsfiddle.net/6WAtQ/

Where I'm stuck:

我被困在哪里:

I created a simple svg triangle, with a Gaussian blur effect, if it's written directly in the HTML (as opposed to the CSS) the svg works perfectly: http://jsfiddle.net/RAKWB/

我创建了一个简单的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>
So I tried to replicate the above ( http://jsfiddle.net/6WAtQ/ ) using my own triangle svg,

所以我尝试用我自己的三角形svg复制上面的内容(http://jsfiddle.net/6WAtQ/),
I replaced the hash signs with '%23', but no dice

我用'%23'替换了哈希标志,但没有骰子

It's not working: http://jsfiddle.net/ZPWxK/1/

这不起作用: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>"); }

body {background-image:url(“data:image / svg + xml; utf8,data:image / svg + xml; utf8,

Thoughts?

2 个解决方案

#1

See how the working fiddle has double quotes just inside the url() and then all the SVG content uses single quotes? You need to do the same. Otherwise the parser doesn't know where the url content ends.

看看工作小提琴如何在url()内部有双引号,然后所有SVG内容都使用单引号?你需要做同样的事情。否则,解析器不知道url内容的结束位置。

Alternatively you could make the url use single quotes and keep your SVG content the same.

或者,您可以使用单引号并保持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>'); }

#2

You can also use a base64 encoding for a cleaner format, even if it increase the actual SVG file size. See also css-tricks.com post.

您还可以使用base64编码获得更清晰的格式,即使它增加了实际的SVG文件大小。另见css-tricks.com帖子。

i.e.:

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

You can use this bash command (tested on MacOS X) to easily generate the CSS background property:

您可以使用此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)"');"

#1