javascript - 带有内联 svg 的 CSS 背景

Question

我一直在寻找一种解决方案来为 IE10+ 的背景提供模糊效果。

我找到了 StackBlur 并让它工作，但在我的情况下它很慢，因为我有一个很大的背景并且希望尽可能快地渲染它。

你知道有一个用于模糊效果的 svg 过滤器，当你有像这样的 svg 内容时它工作正常

<svg width='331' height='500' id='svgroot'><defs><filter id='blur'><feGaussianBlur stdDeviation='4' data-filterId='1'/></filter></defs><image filter='url(#blur)' xlink:href='http://dpc1.ftcdn.net/jpg/00/65/54/88/500_F_65548876_vDfTzTY0Bq7xVdbJH92kLpPy37FDVF5G.jpg' height='100%' width='100%'/></svg>

我想做的是，将这张 svg 图像用作背景图像。它必须是一个CSS背景。我在搜索解决方案时发现了这个 fiddle http://jsfiddle.net/vPA9z/3/所以我认为这是可能的，但为什么这不起作用 http://jsfiddle.net/N2n27/2/

var mySVG2 ="<svg width='331' height='500' id='svgroot'><defs><filter id='blur'><feGaussianBlur stdDeviation='4' data-filterId='1'/></filter></defs><image filter='url(#blur)' xlink:href='http://dpc1.ftcdn.net/jpg/00/65/54/88/500_F_65548876_vDfTzTY0Bq7xVdbJH92kLpPy37FDVF5G.jpg' height='100%' width='100%'/></svg>";

var mySVG64 = window.btoa(mySVG2);
$('body').css({
    "background-image": "url('data:image/svg+xml;base64,"+mySVG64+"')"
});

我尝试转换 Base64，但仍然没有成功。

Answer 1

我相信你需要

1. 首先对图像链接进行编码。(使用像这样的工具:http://bran.name/dump/data-uri-generator/)
2. 使用验证器确保它是有效的http://validator.w3.org/#validate_by_input
3. 将你的 svg 保存到一个文件中

4. 然后对 svg 文件进行编码。

   DEMO edit 或 DEMO full page

您的 SVG 会变成这样(链接的图像有点大，所以我在这段代码中将其剪掉):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width='331' height='500' id='svgroot' version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<defs><filter id='blur'>
<feGaussianBlur stdDeviation='4' />
</filter>
</defs>
<image filter='url(#blur)' xlink:href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD..... ' height='100%' width='100%'/>
</svg>

然后 svg 转入:data:image/svg+xml;base64, ...太长了....

你应该优化你使用的图像，因为在我看来它确实太大了