SVG在移动浏览器中具有阴影模糊 [英] SVG with drop-shadow blurry on mobile browser

问题描述

我正在努力在尽可能多的平台上制作带有阴影的SVG图标。

i am struggling to make work SVG icons with drop-shadow on as much as possible platforms.

为此，我使用了以下简单的CSS：

I am using following simple CSS for that:

.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中再次清除，因此我认为它与阴影具有一些共同之处。

On Desktop browsers like Chrome, Firefox & IE its working good. But on mobile Browser the problems begin: In Chrome the icon gets blurry & in Firefox the drop-shadow is just ignored. When removing the drop-shadow, the icon will be clear again in Chrome, so i think it has something in common with the drop-shadow.

任何人都遇到相同的问题

Anyone had the same problem and found maybe a solution for this?

推荐答案

只是找到了答案。

发生此问题由于SVG滤镜的生成方式：在应用滤镜之前，将创建各个元素的位图图像，然后对其进行操作并分层放置在顶部。您可以在此处找到很好的解释。

Just found the answer for it.
This problem occurs due to the way SVG filters are generated: Before a filter is applied, a bitmap image of the respective element is created which is then manipulated and layered on top. You can find a great explanation here.

要在HDPI屏幕上清晰显示svg图像，您可以尝试在<$ c上使用 filterRes 属性$ c> effect ，它为计算的svg效果提供像素分辨率，有关此处。

像这样使用它：

To show svg images sharp on HDPI screens, you can try using the filterRes-property on the effect, which provides a pixel resolution for calculated svg effects, more on that here.
Use it like so:

<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：包含到您的CSS-绘制的容器大概是 14px x 14px 。要以足够的分辨率渲染阴影以显示视网膜（例如因子 2 ），对于<$ c $，您应该将健康值设为 30 c> filterRes 。这并不理想，但似乎是目前唯一可行的选择。有点打败了完全使用svg的原因。

Say you add background-size: contain to your css - the drawn container will presumably be 14px x 14px. To render the shadow with sufficient resolution for retina displays (eg. factor 2), you should take a healthy value of 30 for filterRes. This is not ideal, but it seems like it is the only working alternative at the moment. Kind of defeats the reason for using svg at all.

这篇关于SVG在移动浏览器中具有阴影模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！