不支持 IE11 过滤器属性答案

【问题标题】：IE11 filter attribute not supported不支持 IE11 过滤器属性
【发布时间】：2020-07-15 11:12:43
【问题描述】：

我尝试了下面的代码并注意到在 IE11 中，第二个圆圈根本没有出现。从第二个 circle 标签中删除 filter="url(#blurMe)" 后，我可以看到绿色的第二个圆圈。

IE11不支持这个功能对吗？是否有其他方法可以实现这一目标？

我查看了文档：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filter，它显示未知的兼容性。

谢谢。

<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
 <filter id="blurMe">
   <feGaussianBlur stdDeviation="5"/>
 </filter>

 <circle cx="60" cy="60" r="50" fill="green" />

 <circle cx="170" cy="60" r="50" fill="green"
          filter="url(#blurMe)" />
</svg>

【问题讨论】：

我尝试了一个空的过滤器定义，但仍然看不到第二个圆圈。我也尝试过使用 faOffset，但这也不起作用。

标签： svg internet-explorer-11

【解决方案1】：

您的代码在 IE 11 浏览器上运行良好，我可以看到带有您上面发布的代码的 2 个圆圈。

测试代码：

<!DOCTYPE html>
<html>
<head>
    <title>Untitled Page</title>
    
</head>
<body>
    <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
        <filter id="blurMe">
          <feGaussianBlur stdDeviation="5"/>
        </filter>
       
        <circle cx="60" cy="60" r="50" fill="green" />
       
        <circle cx="170" cy="60" r="50" fill="green"
                 filter="url(#blurMe)" />
       </svg>

</body>
</html>

在 IE 11 浏览器上的输出：

确保您使用的是您在上面发布的确切代码。
尝试清除缓存并再次尝试测试问题。
如果问题仍然存在，请尝试提供有关该问题的更多信息，例如 IE 11 浏览器的确切版本以及您用于进行此测试的操作系统版本？页面上还有其他代码吗？

【讨论】：