SVG与下拉阴影模糊的移动浏览器

Question

我正在努力使工作SVG图标与下拉阴影在尽可能多的平台上。

我使用以下简单的CSS:

.test{
  width: 14px;
  height: 14px;
  background-image: url("../images/test.svg");
  background-repeat: no-repeat;
  opacity: 0.8;
  -webkit-filter: drop-shadow(1px 1px 0px #E0E0E0);
}

在桌面浏览器如Chrome, Firefox &IE运行良好。但在移动浏览器上，问题开始出现了:在Chrome中，图标变得模糊了& &;在Firefox中，下拉阴影会被忽略。当删除下拉阴影时，图标将在Chrome中再次清晰，所以我认为它与下拉阴影有一些共同之处。

有人有同样的问题，并找到可能的解决方案?

Answer 1

刚刚找到了答案。
这个问题是由于SVG过滤器的生成方式造成的:在应用过滤器之前，创建相应元素的位图图像，然后对其进行操作并在其上分层。你可以在这里找到一个很好的解释。

要在HDPI屏幕上清晰地显示svg图像，您可以尝试在effect上使用filterRes -属性，该属性为计算的svg效果提供像素分辨率，详见此处。
像这样使用:

<filter id="dropshadow" height="170%" filterRes="200">
  <feGaussianBlur in="SourceAlpha" stdDeviation="20"/>
  <feOffset dx="0" dy="2" result="offsetblur"/>
  <feMerge> 
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<path id="icon" fill="#fff" style="filter:url(#dropshadow)" d="..."></path>
</svg>

说你添加background-size: contain到你的css -绘制的容器可能是14px x 14px。以足够的分辨率为视网膜显示渲染阴影(例如:因子2)，您应该为filterRes取一个健康值30。这并不理想，但似乎是目前唯一可行的选择。有点违背了使用svg的理由。