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

如果您提前了解图像的尺寸，则可以使用9:00-17:00和viewBox SVG属性并完全跳过JavaScript。在my fiddle中，您似乎必须明确指定图片的preserveAspectRatio和width才能生效。

height

另一种选择是将图像指定为SVG元素的背景in CSS，使用filter property模糊。

Answer 2

我曾经在jQuery中做过类似的事情 - 模糊的svg里面有一个<image>，其行为与给出center top / cover背景的行为相同。它使用容器的纵横比（带overflow: hidden）并将其与图像的比率进行比较，以使其适应包装元素的整个高度或宽度。当父级比图像本身相对较窄时，使用变换来水平居中图像：

Fiddle

<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');
}
});

我从最初的演示中减少了这一点，该演示使用了一个创建动画模糊的小插件。在这种形式下，完全使用它是一个很大的步骤，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');
    }
}
});

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

2 个答案: