这个模糊是如何工作的

Question

自从几天以来，我一直在寻找一种方法，可以很容易地将模糊应用到一个可以兼容所有浏览器的图像上。在我看到了很多解决方案(webkit，但与ie、blur.js和其他脚本不兼容的时候，我没有成功运行，算法.)我终于找到了一种神奇的方法，只需少量html和css就可以做到这一点：http://jsfiddle.net/jamygolden/yUG5U/2/light/

<style>
#svg-image-blur { height: 220px; width: 320px; }
    #svg-image { filter:url(#blur-effect-1); }

</style> 
<svg id="svg-image-blur">
    <image x="10" y="10" id="svg-image" width="300" height="200" xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" />

    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg> 

但事情是这样的，我不明白它是如何工作的，当我放置一个<img>时，它不能工作，我必须做一个<image>，然后指定维度，用一个xlink:href替换src，否则它不会显示图像。我无法解释，<image>是一个不同的标签吗？没有作者的解释，我找不到关于这件事的文件。

无论如何，我正试图用width: 100%设置背景图像的模糊，图像没有调整大小：http://jsfiddle.net/fu11q8tc/3/

如果有人能解释我，我会很感激的！

Answer 1

正如我在评论中所说的，SVG ()是HTML/CSS之上的另一层；它实际上是一种完全不同的技术，这就是为什么元素和属性是不同的。正如模糊显示的那样，它非常强大，甚至还有一个名为Inkscape的编辑器，它创建了可以嵌入到HTML中的SVG代码。

也就是说，要将图像扩展到整个图像，您需要关闭图像上的preserveAspectRatio，方法是将其值设置为none。

编辑:增加100%的高度

​

$(document).ready(function(){
  var img = new Image();
  $(img).load(function(){
     var aspectRatio = this.naturalWidth/this.naturalHeight;
     $("#svg-image-blur").css("height", window.innerWidth/aspectRatio);
     console.log(aspectRatio);
  });
  //img.src = "http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg";
  img.src = "http://img4.sizeis.com/photos/banana.jpg";
 });

html, body {
    width: 100%;
    height: 100%;
}
#svg-image-blur { width: 100%; overflow: visible; height: 100% }
    #svg-image { filter:url(#blur-effect-1); }

#background-content {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
    height: 340px;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background-content" >					
	<svg id="svg-image-blur">
		<image id="svg-image" preserveAspectRatio="none" width="100%" height="100%" id="svg-image" xlink:href="http://img4.sizeis.com/photos/banana.jpg" />
		<filter id="blur-effect-1">
		    <feGaussianBlur stdDeviation="8" />
		</filter>
	</svg>  
</div>

​