功能检测支持svg过滤器

我需要功能检测浏览器是否支持svg过滤器（feGaussianBlur，具体）。我将如何去测试这个？ Safari不支持过滤器，静静地忽略过滤器。功能检测支持svg过滤器

2012-03-16 wheresrhys

你也许还检查可用的接口的枚举，e.g：

var supportsfilter = typeof SVGFEColorMatrixElement !== undefined && 
        SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE==2;

这样你就不需要建立新的元素，如https://stackoverflow.com/a/9767059/109374。我还没有测试过，看看它在Safari中是否按预期工作。

更新： 补丁提交的Modernizr：https://github.com/Modernizr/Modernizr/pull/531

来源

2012-03-19 13:33:40

我最初在萤火虫的DOM树中寻找这样的东西，但找不到任何东西。这些接口是什么？ - 没有添加到窗口对象的全局变量？ *编辑*我现在看到他们 - 我必须设置萤火虫以显示不可枚举的属性 – wheresrhys 2012-03-19 14:33:41

虽然有点额外的奇怪 - 属性不会显示在DOM中（不会初始化？），直到添加SVG后在控制台中调用页面或“SVGFEColorMatrixElement”。我已经在safari中进行了测试，并且引发了一个引用错误，因此您可能会这样做，因此测试需要一个try/catch块。 +1 – wheresrhys 2012-03-19 14:44:37

如果浏览器实现相应的DOM接口，那么这些常量应该始终存在。如何使用typeof的变体？ – 2012-03-19 16:19:45

我创建了一个小提琴http://jsfiddle.net/yxVSe/，它检查GaussianBlur属性的存在性。说高斯布尔有一个方法setStdDeviation，我们检查该方法的存在，当我们得出结论，当前的浏览器剂量支持该过滤器。

当这个小提琴在检查safari文本将是红色，而在Firefox中它将是绿色的。

来源

2012-03-19 08:36:06 rajkamal

好极了！好的答案 – wheresrhys 2012-03-19 11:31:56

'if（filterTag.constructor.toString（）。indexOf（'SVGFilterElement'）！= -1）'test不正确的检测Opera（它支持svg过滤器）。 – 2012-03-19 11:36:58

@Erik Dahlstrom - 不错的地方，虽然玩了一下，但看起来这行代码是不必要的。我已经将测试缩减到只有3行，这在浏览器中给出了期望的结果'var blur = document.createElementNS（“http://www.w3.org/2000/svg”，“feGaussianBlur”）; \t \t blur.setAttribute（“stdDeviation”，“2”）; \t \t return（typeof blur.setStdDeviation！=='undefined'）;' – wheresrhys 2012-03-19 12:43:21

我增加了一个小的修改对传统机器人会错误

var supportsfilter = window['SVGFEColorMatrixElement'] !== undefined && SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE == 2

来源

2014-01-10 10:03:20 Nedudi

功能检测支持svg过滤器

回答

相关问题