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

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 中不起作用

SVG logo drop-shadow property not working in IE

internet-explorer

svg

dropshadow

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

SVG logo drop-shadow property not working in IE

internet-explorer

svg

dropshadow

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