SVG logo drop-shadow property not working in IE

Question

Drop shadow property for SVG logo not working in IE, but working in chrome.

I have used this:

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

IE does not support it per https://caniuse.com/#feat=css-filters — Robert Longson, Oct 26 '18 at 09:12
Use another browser that does support it, or try implementing it using SVG filters. — Robert Longson, Oct 26 '18 at 09:14

score 2 · Accepted Answer · answered Oct 26 '18 at 21:13

The SVG filter equivalent of drop-shadow() is described here.

So yours would be:

<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>

Put this in your SVG and refer to it using filter="url(#drop-shadow)" or filter url(#drop-shadow).

Here's a working example. Since your offsets are 0, you can simplify it a bit...

<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>

SVG logo drop-shadow property not working in IE

1 Answers1