SVG 徽标阴影属性在 IE 中不起作用答案

【问题标题】：SVG logo drop-shadow property not working in IESVG 徽标阴影属性在 IE 中不起作用
【发布时间】：2019-03-31 00:08:33
【问题描述】：

SVG 徽标的阴影属性在 IE 中不起作用，但在 chrome 中起作用。

我用过这个：

filter:drop-shadow(0px 0px 2px #a2a2a2);
-ms-filter:drop-shadow(0px 0px 2px #a2a2a2);
-webkit-filter:drop-shadow(0px 0px 2px #a2a2a2);

【问题讨论】：

IE 不支持 caniuse.com/#feat=css-filters
@RobertLongson 有什么解决办法吗？？
使用另一个支持它的浏览器，或者尝试使用 SVG 过滤器来实现它。
@RobertLongson 谢谢。

标签： internet-explorer svg dropshadow

【解决方案1】：

drop-shadow() 的 SVG 过滤器等效为 described here。

所以你的应该是：

<filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
  <feOffset dx="0" dy="0" result="offsetblur"/>
  <feFlood flood-color="#a2a2a2"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

将其放入您的 SVG 并使用 filter="url(#drop-shadow)" 或 filter url(#drop-shadow) 引用它。

这是一个工作示例。由于您的偏移量为 0，您可以稍微简化一下...

<svg width="200" height="200">
  <defs>
    <filter id="drop-shadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
      <feFlood flood-color="#a2a2a2"/>
      <feComposite in2="blur" operator="in"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <rect x="50" y="50" width="100" height="100" fill="white" filter="url(#drop-shadow)"/>
</svg>

【讨论】：