如何强制使用SVG元素显示的图像覆盖整个宽度和高度

Question

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

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

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

小提琴2 -图像不模糊,但它覆盖整个屏幕

结果我想:图像应该模糊(如Fiddle1),它也应该覆盖整个屏幕(如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一样覆盖整个屏幕并且也要模糊.

Answer 1

如果您提前了解图像的尺寸,则可以使用viewBox和preserveAspectRatioSVG属性并完全跳过JavaScript.在我的小提琴中,似乎你必须明确指定图像width并height使其工作.

<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>

另一种选择是将图像指定为CSS中的SVG元素的背景,使用filter属性进行模糊处理.