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

Question

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

现在为了更好地理解我在下面提供了两个小提琴，最后我想要达到什么结果：

Fiddle 1 -图像模糊，但没有覆盖整个屏幕

Fiddle 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和preserveAspectRatio SVG 属性并完全跳过 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 属性进行模糊处理。

Answer 2

不久前我碰巧用 jQuery 做了一些类似的事情 - 一个模糊的svg ，里面有一个<image> ，它的行为就像它被赋予了一个center top / cover背景一样。 它使用容器的纵横比（ overflow: hidden ）并将其与图像的比例进行比较，使其适应包装元素的全高或全宽。 当父级比图像本身窄时，使用变换使图像水平居中：

小提琴

<div id="wrap">
  <svg id="blur">
    <filter id="filter">
      <feGaussianBlur stdDeviation="5" />
    </filter>
    <image xlink:href="//saudiwoman.files.wordpress.com/2010/02/crowded-restaurant.jpg" width="100%" height="100%" filter="url(#filter)"></image>
  </svg>
</div>

body {
  margin: 0;
  padding: 0;
}

#wrap {
  height: 100vh;
  overflow: hidden;
}

.tall {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

$(function() {

var parent = $('#wrap'),
scene = $('#blur'),
ratio = 4288/2848; // aspect ratio of the image

$(window).on('load resize', coverSpace);

function coverSpace() {

    var range = parent.width(),
    term = parent.height(),
    proportion = range/term;

    if (proportion >= ratio) scene.css({width: '100%', height: range/ratio}).removeAttr('class');
    else scene.css({width: term*ratio, height: term}).attr('class', 'tall');
}
});

我从原始演示中减少了这个，它使用了一个创建动画模糊的小插件。 在这种形式中，让它完全成为 vanilla JS 并不是一个很大的进步，无论如何，jQuery 在访问svg并不是那么好。 但是，如果它位于已经链接到库的站点上，则无论如何它都应该可以正常工作。

这也是一个模仿center center / cover （带有切换变换）的简化案例：

http://codepen.io/Shikkediel/pen/MaGbbp

---

编辑 - 这是纯粹主义者的一个：

document.addEventListener('DOMContentLoaded', function() {

var parent = document.getElementById('wrap'),
scene = document.getElementById('blur'),
ratio = 4288/2848;

window.addEventListener('load', coverSpace);

window.addEventListener('resize', coverSpace);

function coverSpace() {

    var range = parent.clientWidth,
    term = parent.clientHeight,
    proportion = range/term;

    if (proportion >= ratio) {
    scene.style.width = '100%';
    scene.style.height = range/ratio + 'px';
    scene.removeAttribute('class');
    }
    else {
    scene.style.width = term*ratio + 'px';
    scene.style.height = term + 'px';
    scene.setAttribute('class', 'tall');
    }
}
});