Question

我有这个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>

Chrome上的结果： Chrome

在IE上的结果： IE

该过滤器未在IE上显示： Border missing on IE

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

但是它们都不起作用。

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

如何修复“ SVG过滤器不适用于IE，但适用于Chrome和Firefox”

0 个答案: