0

我一直在寻找一种解决方案，为 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背景。我在搜索解决方案时发现了这个小提琴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 但仍然没有运气。

4

1 回答 1

0

我相信你需要

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

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

    DEMO编辑或DEMO整页

你的 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, ...much too long to be there....

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

于 2014-06-14T23:41:16.953 回答