如何解决SVG滤镜:宽度100%高度100%不覆盖图像
我有一个简单的SVG过滤器。如果单击下面的示例,该过滤器将显示/消失:
body {
background: #fff url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='20' height='20' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='%23b91a10'/></g></svg>") no-repeat;
}
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;
}
我希望过滤后的图像与未过滤后的图像具有相同的尺寸。有谁知道我该怎么做?任何指针将不胜感激!
解决方法
您需要使用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>
,
对过滤器进行硬编码,使其宽度为200像素,高度为200像素时有效
var image = document.querySelector('image');
var url = 'https://i.picsum.photos/id/202/200/200.jpg?hmac=eGzhW5P2k0gzjc76Tk5T9lOfvn30h3YHuw5jGnBUY4Y';
image.setAttribute('xlink:href',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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。