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

我使用

svg

元素生成了一个模糊图像。我想让它覆盖整个屏幕的宽度和高度

现在为了更好地理解，我在下面提供了两个提琴，以及我想要达到的最终结果：

-图像模糊，但无法覆盖整个屏幕

-图像不会模糊，但会覆盖整个屏幕

我想要的结果：图像应该是模糊的（像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>

---

为了再次清晰，我希望图像像小提琴一样覆盖整个屏幕，并且变得模糊。

不久前，我碰巧用jQuery制作了类似的东西-一个模糊的

svg

，里面有一个

，它的行为就像给它一个

中顶/中盖

背景一样。它使用容器的纵横比（带有

overflow:hidden

）并将其与图像的纵横比进行比较，使其适应包装器元素的全高或全宽。当父对象相对窄于图像本身时，将使用变换使图像水平居中：

我已经减少了从原来的演示，它使用了一个小插件，创建动画模糊。在这种形式下，要使它成为一个普通的JS并不是一个很大的步骤，jQuery在访问

svg

方面也不是很好。但是，如果它在一个已经链接到图书馆的网站上，它应该可以像在任何情况下一样正常工作

这里还有一个模拟

居中/覆盖

（带切换变换）的简化案例：

---

编辑-这里有一个是为纯粹主义者准备的：

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

---

如果您提前知道图像的尺寸，可以使用

viewBox

和

preserveSpectratio

SVG属性并完全跳过JavaScript。在中，您似乎还必须明确指定图像的

宽度

和

高度

，才能使其正常工作

<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元素的背景，由于“.

可能与@taxicala重复，我在那篇文章中找不到任何答案。你能回答或指定答案的确切位置吗？我制作的这个演示看起来很接近-它模仿了

顶部中间/封面

：。@Shikkediel谢谢。它很有帮助。你可以将它作为答案发布，以便我能接受它1。将jpeg转换为数据uri，2。将svg文件中的图像替换为该数据uri版本3。将svg转换为URI或base64编码，4。使用SVG图像作为背景图像。非常好的解决方案，我必须记住。我认为，在CSS中使用背景和模糊的选项缺乏跨浏览器支持。但是+1来自我。

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

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