Html 如何修复'；SVG过滤器不适用于IE，但适用于Chrome和Firefox'；

我有这个SVG文件，我需要在我的项目中使用，但在测试期间，我发现它在IE和Edge上不起作用，但在Chrome和Firefox上工作得非常好。调试时，我发现标记显示不正确。下面是我的SVG代码

<svg xmlns="http://www.w3.org/2000/svg" width="326" height="471" viewBox="0 0 326 471">
  <defs>
    <style>.a{stroke:#fff;fill:url(#a);}.b{stroke:none;}.c{fill:none;stroke:none;}</style>
    <linearGradient id="a" x1="0.789" y1="0.864" x2="-0.232" y2="-0.463" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="#fcfcfc"/>
      <stop offset="1" stop-color="#f3f3f3"/>
    </linearGradient>
    <filter id="myFilter" x="0" y="0" width="326" height="471" filterUnits="userSpaceOnUse">
      <feOffset dy="1" input="SourceAlpha"/>
      <feGaussianBlur stdDeviation="1" result="c"/>
      <feFlood flood-opacity="0.329"/>
      <feComposite operator="in" in2="c"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <g class="d" filter="url(#myFilter)" transform="matrix(1, 0, 0, 1, 0, 0)">
    <g class="a" transform="translate(323 467) rotate(180)">
      <rect class="b" width="320" height="465" rx="10"/>
      <rect class="c" width="320" height="465" rx="10"/>
    </g>
  </g>
</svg>

.a{stroke:fff；fill:url（#a）；}.b{stroke:none；}.c{fill:none；stroke:none；}

铬的结果：

IE的结果：

过滤器未显示在IE上：

我尝试了以下方法：- 1.在HTML中通过样式标记设置过滤器。 2.通过head tag中的style tag设置过滤器

但他们都没有工作

---

注意：过滤器用于在SVG侧面显示阴影边框效果。

一种解决方案是接受IE中并非所有功能都正常工作，阴影仅用于外观。另一种选择是使用带圆角的纯HTML元素和

框阴影

，一种解决方案是接受IE中并非所有东西都正常工作，阴影仅用于外观。另一个选项是使用带圆角的纯HTML元素和

框阴影