4

我正在努力在尽可能多的平台上制作带有阴影的 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 中的图标会再次清晰，所以我认为它与阴影有一些共同点。

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

4

1 回答 1

5

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

要在 HDPI 屏幕上显示清晰的 svg 图像，您可以尝试在filterRes上使用 -property effect，它为计算的 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），您应该取一个健康的值30for filterRes。这并不理想，但它似乎是目前唯一可行的选择。有点打败了使用 svg 的原因。

于 2015-02-09T22:21:15.323 回答