繁体   English   中英

SVG Filter: width 100% height 100% 不覆盖图片

[英]SVG Filter: width 100% height 100% does not cover image

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

我希望过滤后的图像与未过滤的图像大小相同。 有谁知道我该怎么做? 任何指针将不胜感激!

您需要使用xy属性设置初始维度,如下所示。

<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', 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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM