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