用作 CSS 背景时的 SVG 过滤器质量答案

【问题标题】：SVG filter quality when used as CSS background用作 CSS 背景时的 SVG 过滤器质量
【发布时间】：2015-02-24 13:28:13
【问题描述】：

我正在尝试使用 SVG 文件作为 div 的背景，并且一切正常，但当我向 SVG 文件添加过滤器时，它显示非常粗糙。是否需要在 CSS 或 SVG 文件中添加某种设置以提高质量？我有一个包含一堆图标的 Web 应用程序，并试图通过加载一个文件并偏移背景来减轻网站的负担，但仍保持高质量并具有可扩展的图标。我是不是走错路了？

我正在使用 Inkscape 生成 SVG 文件

这是我的 CSS：

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

【问题讨论】：

你的标记是什么样的？
向 SVG 添加过滤器是什么意思？
例如一个包含高斯模糊的阴影......它显示得非常像素化
我的意思是，你是用photoshop之类的软件来做的吗？如果是这样，我怀疑你得到的是 SVG。 SVG 是基于矢量的，因此它可以缩放并且不会像素化。如果您应用过滤器，它可能会更改图像格式，并且不再缩放
你的过滤器在哪里？

标签： html css svg svg-filters

【解决方案1】：

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

【讨论】：

Chrome 和 Firefox 不再支持 filteRes，因为它在滤镜效果规范中已被弃用，并且一旦您在单个元素上有多个滤镜，实现起来就非常复杂。
即使您指定了 SVG 1.1？
即便如此，所有 UA 都会忽略版本属性。