SVG过滤器:宽度100%高度100%不覆盖图像

Question

我有一个简单的SVG过滤器。如果您单击下面的示例，该过滤器将出现/消失：

var image = document.querySelector('image');
var url = 'https://i.picsum.photos/id/202/200/200.jpg?hmac=eGzhW5P2k0gzjc76Tk5T9lOfvn30h3YHuw5jGnBUY4Y';
image.setAttribute('xlink:href', url);
window.addEventListener('click', function() {
var filter = image.getAttribute('filter')
? ''
: 'url(#blur)';
image.setAttribute('filter', filter);
})

image {
background: red;
}

<svg width='200' height='200'>
<filter id='blur' width='100%' height='100%'>
<feGaussianBlur stdDeviation='2' result='blur' />
</filter>
<image x='0' width='200px' height='200px' xlink:href='' id='svg-image' filter='url(#blur)'  />
</svg>

我希望过滤后的图像与未过滤的图像大小相同。有人知道我怎样才能做到这一点吗？任何建议都将不胜感激！

Answer 1

您需要使用x和y属性设置初始维度，如下所示。

<filter id='blur' x='0' y='0' width='100%' height='100%'>
...

var image = document.querySelector('image');
var url = 'https://i.picsum.photos/id/202/200/200.jpg?hmac=eGzhW5P2k0gzjc76Tk5T9lOfvn30h3YHuw5jGnBUY4Y';
image.setAttribute('xlink:href', url);
window.addEventListener('click', function() {
var filter = image.getAttribute('filter')
? ''
: 'url(#blur)';
image.setAttribute('filter', filter);
})

image {
background: red;
}

<svg width='200' height='200'>
<filter id='blur' x='0' y='0' width='100%' height='100%'>
<feGaussianBlur stdDeviation='2' result='blur' />
</filter>
<image x='0' width='200px' height='200px' xlink:href='' id='svg-image' filter='url(#blur)'  />
</svg>

Answer 2

对宽度为200px、高度为200px的过滤器进行硬编码可以实现

var image = document.querySelector('image');
var url = 'https://i.picsum.photos/id/202/200/200.jpg?hmac=eGzhW5P2k0gzjc76Tk5T9lOfvn30h3YHuw5jGnBUY4Y';
image.setAttribute('xlink:href', url);
window.addEventListener('click', function() {
var filter = image.getAttribute('filter')
? ''
: 'url(#blur)';
image.setAttribute('filter', filter);
})

image {
background: red;
}

<svg width='200' height='200'>
<filter id='blur' width='200px' height='200px'>
<feGaussianBlur stdDeviation='2' result='blur' />
</filter>
<image x='0' width='200px' height='200px' xlink:href='' id='svg-image' filter='url(#blur)'  />
</svg>