Question

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

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

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

1 个答案: