Question

在Edge中，如果应用不受支持的滤镜，例如feDropShadow，则不会渲染形状。

我还观察到Chrome在其他任何不受支持的过滤器中的行为。有解决方法吗？

<svg width='250' height='250' xmlns="http://www.w3.org/2000/svg" viewBox='0 0 100 100'>
  <defs>
    <filter id="filter">
      <!-- Unsupported filter -->
      <feUnsupportedFilter/>
    </filter>
  </defs>
  <circle fill="cornflowerblue" filter="url(#filter)" cx="50" cy="35" r="20"/>
</svg>

Answer 1

我发现，如果添加任何其他受支持的滤镜，则形状将正确呈现。

<svg width='250' height='250' xmlns="http://www.w3.org/2000/svg" viewBox='0 0 100 100'>
  <defs>
    <filter id="filter">
      <!-- Supported filter -->
      <feOffset/>
      <!-- Unsupported filter -->
      <feUnsupportedFilter/>
    </filter>
  </defs>
  <circle fill="cornflowerblue" filter="url(#filter)" cx="50" cy="35" r="20"/>
</svg>

不支持的SVG过滤器隐藏形状

1 个答案: