用作CSS背景时的SVG滤镜质量

Question

I am trying to use a SVG file as a background for a div and everything is working just fine except when I add a filter to the SVG file it displays very rough. Is there some sort of setting that I need to add in the CSS or inside the SVG file to increase the quality? I have a web application that has a bunch of icons and was trying to lighten up the site by loading one file and offsetting the backgrounds but still keeping the quality high and having the icons scalable. Am I going about this the wrong way?

I am using Inkscape to generate the SVG file

Here is my CSS:

.icoErase{
   width: 1em;
   height: 1em;
   background-image: url('../images/FormIcons.svg');
   background-size: auto 6em;
   background-position: -1em -1em;
   background-repeat: no-repeat;
}

Answer 1

我可能建议在SVG中的filter元素上设置一个显式的filterRes属性，范围从1000到2000。浏览器有时会选择不正确的默认设置。