如何强制使用SVG元素显示的图像覆盖整个宽度和高度 [英] How to force an image displayed with SVG element to cover the entire width and height

问题描述

我使用svg元素生成了模糊的图像.我希望它能覆盖屏幕的整个宽度和高度.

I have generated a blurred image using svg element. I want it to cover the entire width and height of the screen.

现在为了更好地理解，我在下面提供了两个小提琴，最后我想要实现的结果是:

Now to better understand I am providing two fiddles below and at last what result I am wanting to achieve :

小提琴1 -图像模糊，但是图像模糊不能覆盖整个屏幕

小提琴2 -图像不模糊，但涵盖了整个屏幕

我想要的结果:图像应模糊(如 Fiddle1 )，并且应覆盖整个屏幕(如 Fiddle2 )

Result I want : Image should be blurred (like Fiddle1) and also it should cover entire screen (like Fiddle2)

HTML代码可在第一提琴中模糊图像:

<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <filter id="filter">
        <feGaussianBlur stdDeviation="5"/>
    </filter>
    <image xlink:href="https://saudiwoman.files.wordpress.com/2010/02/crowded-restaurant.jpg" filter="url(#filter)"></image>
</svg>

要再次清楚，我希望图像像fiddle2 和一样覆盖整个屏幕.

To be clear again I want image to cover the entire screen like fiddle2 and to be blurred too.

推荐答案

如果提前知道图像的尺寸，则可以使用viewBox和preserveAspectRatio SVG属性，并完全跳过JavaScript.在我的小提琴中，您似乎还必须为此明确指定图像的width和height工作.

If you know the dimensions of the image ahead of time, you can use the viewBox and preserveAspectRatio SVG attributes and skip the JavaScript altogether. In my fiddle it appears that you have to specify the image's width and height explicitly as well for this to work.

<svg class="blur" viewBox="0 0 4288 2848" preserveAspectRatio="xMidYMid slice">
  <filter id="filter">
    <feGaussianBlur stdDeviation="5"/>
  </filter>
  <image xlink:href="https://saudiwoman.files.wordpress.com/2010/02/crowded-restaurant.jpg" filter="url(#filter)"
    width="4288" height="2848"></image>
</svg>

另一种选择是将图像指定为SVG元素的背景在CSS 中，并用<一个href ="https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter" rel ="noreferrer">过滤器属性.

Another option is to specify the image as the SVG element's background in CSS, blurring with the filter property.

这篇关于如何强制使用SVG元素显示的图像覆盖整个宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！