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背景。我在搜索解决方案时找到了这个小提琴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

我相信你需要

在第一个位置编码链接到图片。（使用像这样的工具：http://bran.name/dump/data-uri-generator/）
使用验证程序确保其有效http://validator.w3.org/#validate_by_input
将svg保存到文件中
然后编码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, ...much too long to be there....

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

内联svg的CSS背景

1 个答案: