SVG 过滤器：宽度 100% 高度 100% 不覆盖图像答案

【问题标题】：SVG Filter: width 100% height 100% does not cover imageSVG 过滤器：宽度 100% 高度 100% 不覆盖图像
【发布时间】：2021-02-08 21:55:00
【问题描述】：

我有一个简单的 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>

我希望过滤后的图像与未过滤的图像大小相同。有谁知道我怎么能做到这一点？任何指针将不胜感激！

【问题讨论】：

哎呀。在最近的 Chrome 中刷新同一页面会在单击时显示不同的行为...
你需要覆盖-10%的默认x和y...

标签： javascript html css svg svg-filters

【解决方案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>

【讨论】：

【解决方案2】：

将过滤器硬编码为宽度为 200 像素，高度为 200 像素的作品

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>

【讨论】：