用于模糊图像的 Svg答案

【问题标题】：Svg for blur image用于模糊图像的 Svg
【发布时间】：2014-11-21 07:42:51
【问题描述】：

我有 div 和 2 background: img(url), img(url())... 在屏幕上居中。需要使用 svg（不是 CSS# 过滤器道具）使图像（嗯，两者都被覆盖）模糊不知何故，这些不起作用：（blur.svg 文件）

<?xml version="1.0" standalone="no" ?>
 <svg width="1" height="1" version="1.1"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
      <filter id="bluring">
          <feGaussianBlur in="SourceGraphic" stdDeviation="2 3" />
      </filter>
   </defs>
</svg>

html:

.svgflt { background-color: orangered; backgroung: url(...);  
              filter: url(blur.svg#bluring);
...
 <div class="svgflt">  </div>

【问题讨论】：

您的 svg 没有尺寸？请参考这个例子：jsfiddle.net/jalbertbowdenii/vuTqY（来源：jalbertbowdenii）
我也希望backgroung 是一个错字。
使用纯 SVG（如 cyrbil 的演示）当然可以。但是如果你想将图像显示为divs 背景，那么我认为这里存在跨浏览器问题。事实上，上面的代码应该可以在 FireFox 中运行。我在 Internet Explorer 中尝试了一个简单的演示，但它不起作用。它也不适用于基于 webkit 的浏览器。但是，您可以改用-webkit-filter CSS 功能。总之，您会被困在如何使代码在 Internet Explorer 中运行。
stackoverflow.com/questions/20401219/svg-image-blur-on-firefox/…
过滤器:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');在 IE10 或更高版本中无法使用。

标签： html css svg blur svg-filters

【解决方案1】：

检查拼写。你写了“backgroung”

此外，此链接可能会有所帮助： http://www.w3schools.com/svg/svg_fegaussianblur.asp

看看你写的代码是否正确。

【讨论】：