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＆amp; IE工作得很好。但是在移动浏览器上，问题就出现了：在Chrome中，图标变得模糊不清在Firefox中，只会忽略掉落阴影。删除阴影时，Chrome中的图标会再次显示，因此我认为它与阴影有一些共同之处。

任何人都有同样的问题，可能会找到解决方案吗？

Answer 1

刚刚找到答案。
由于生成SVG过滤器的方式，会出现此问题：在应用过滤器之前，会创建相应元素的位图图像，然后对其进行操作并在顶部进行分层。你可以找到一个很好的解释here。

要在HDPI屏幕上显示svg图像清晰，您可以尝试使用filterRes上的effect - 属性，该属性为计算的svg效果提供像素分辨率，更多关于here 。
像这样使用它：

<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 ），您应该为30获取健康的filterRes值。这并不理想，但它似乎是目前唯一可行的选择。有点失败了使用svg的原因。

移动浏览器上带有阴影模糊的SVG

1 个答案: