支持SVG滤镜的特征检测功能

Question

我需要进行特性检测，以确定浏览器是否支持SVG过滤器（具体来说是feGaussianBlur）。我该如何测试这个功能？Safari不支持该过滤器，但会默默地忽略它。

- wheresrhys

Answer 1

你可以查看接口中可用的枚举类型，例如：

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

这样，您就不必像https://dev59.com/jGHVa4cB1Zd3GeqPop8X#9767059中那样构建新元素了。我还没有测试这在Safari中是否正常工作。

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

- Erik Dahlström

---

我最初在firebug的DOM树中寻找类似的东西，但是没有找到。这些接口是什么？-不会添加到window对象的全局变量？编辑我现在看到它们了-我必须设置firebug以显示不可枚举属性。 - wheresrhys

有一点额外的奇怪之处 - 直到SVG被添加到页面或在控制台中调用SVGFEColorMatrixElement之后，属性才会出现在DOM中（未初始化？）。我已经在Safari中进行了测试，并抛出了引用错误，正如您所期望的那样，因此测试需要一个try/catch块。+1 - wheresrhys

这些只是常量，如果浏览器实现了相应的 DOM 接口，则应始终存在。那么使用 typeof 的变体呢？ - Erik Dahlström

@ErikDahlström，我试图在SVG文档中使用console.log(document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Filter", "1.1"))来解决这个问题，但不幸的是，在Firefox和Safari中都返回false。请告诉我如何解决它。 - Rajkamal Subramanian

Answer 2

我已经创建了一个 fiddle http://jsfiddle.net/yxVSe/，用于检查 GaussianBlur 属性的存在。 例如，如果 GaussianBlur 有一个名为 setStdDeviation 的方法，我们将检查该方法是否存在。如果不存在，我们得出结论当前浏览器不支持该过滤器。

当在 Safari 中检查此 fiddle 时，文本会变成红色；而在 Firefox 中则会变成绿色。

- Rajkamal Subramanian

---

if(filterTag.constructor.toString().indexOf('SVGFilterElement') != -1) 测试未能正确检测 Opera（它支持 SVG 滤镜）。 - Erik Dahlström

@Erik Dahlstrom - 很好的发现，虽然我稍微试了一下，看起来那行代码本来就是不必要的。我已经将测试缩减到只有3行，可以在各种浏览器中获得所需的结果 var blur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); blur.setAttribute("stdDeviation", "2"); return (typeof blur.setStdDeviation !== 'undefined' ); - wheresrhys

实际上，那个的第二行也不是必需的，因此两行测试就可以了。 - wheresrhys

如果有人在10年后来到这里：Safari很糟糕，不实现这个方法 - 尽管标准的SVG规范如此 - 但您仍然可以使用.setAttribute('stdDeviation', '5')在元素上设置它。 - seekingtheoptimal

Answer 3

我为遗留的安卓漏洞添加了一个小修改

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

- Nedudi