Фильтр SVG: шириной 100% высотой 100% не полностью обрабатывает изображение

101

14 апреля 2022, 11: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>

Я бы хотел, чтобы отфильтрованное изображение было того же размера, что и нефильтрованное. Кто-нибудь знает, как я могу это сделать?

Свободный перевод вопроса SVG Filter: width 100% height 100% does not cover image от участника @duhaime.

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>

Свободный перевод ответа от участника @Derek.W.