SVG Filter: width 100% height 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

將過濾器硬編碼為寬度為 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>