SVG滤镜：宽度100％高度100％不覆盖图像

问题描述

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

    body {
  background: #fff url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='20' height='20' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23b91a10'/></g></svg>") no-repeat;

}

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

我希望过滤后的图像与未过滤后的图像具有相同的尺寸。有谁知道我该怎么做？任何指针将不胜感激！

解决方法

您需要使用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>

,

对过滤器进行硬编码，使其宽度为200像素，高度为200像素时有效

var image = document.querySelector('image');

var url = 'https://i.picsum.photos/id/202/200/200.jpg?hmac=eGzhW5P2k0gzjc76Tk5T9lOfvn30h3YHuw5jGnBUY4Y';

image.setAttribute('xlink:href',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>